Changing the map canvas style has made the map look like this.
I have set the map canvas div style like this:
<!-- Map -->
<div id="map-canvas" data-role="content" style="width: 100%; height: 100%; position: relative; background-color: white; overflow: hidden;">
</div>
<!-- /content -->
It is like the actual div has shrunk just because it is not the first page.
Perhaps I should set a class for the map div? Do you know what that would include?
This is becoming an arghh moment, lol, but thank you in advance for any further suggestions.
EDIT: Adding pic of the nice behaving map which seems to require a style height of 450px or else I get just get a strip across the top of the page, however, it is completely filled in by the map.
Thank you again.
Solution: Perhaps not correct but I stopped loading my map.js, only initialized map, and placed it in a script tag at the beginning of the location page. The script is:
- <script type="text/javascript">
// When map page opens get location and display map
$("#location").on("pagecreate", function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
initialize();
});
}
});
function initialize() {
//var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
MYMAP.map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
MYMAP.map.setCenter(pos);
MYMAP.map.bounds = new google.maps.LatLngBounds();
var infowindow2 = new google.maps.InfoWindow({
map: MYMAP.map,
position: pos,
content: 'You Are Here.'
});
}
</script>
