0

I am using jquery mobile to create a webpage and I followed the tutorial found here: https://www.youtube.com/watch?v=yANtE1b8cLc Basically in a nutshell the video is about adding multiple markers on a google maps and then making sure all the markers are shown on the map at the same time.

MY problem is that when i load the page whether on my phone or my computer the map is not the correct size BUT the height and width of what the map SHOULD be is visible

Now if i refresh the page the map becomes full size.

I am just guessing but maybe the page is loading without finishing loading the google maps api BUT i am just guessing

Here is the code I used to create the map

function init() {         
var mapDiv = document.getElementById("map_canvas3");           
var mapOptions = {
center: new google.maps.LatLng(48.8582, 2.2945),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapDiv, mapOptions);

var locations = [];
locations.push ( {name:"Eifel Tower", latlng: new         

google.maps.LatLng(48.8582, 2.2945)} );
locations.push ( {name:"The Louvre", latlng: new   

google.maps.LatLng(48.8611, 2.3364)} );

var bounds = new google.maps.LatLngBounds ();
for (var i=0;i<locations.length;i++ ) {
var marker = new google.maps.Marker({position: locations[i].latlng,          

map:map, title:locations[i].name});
bounds.extend (locations[i].latlng);

}
map.fitBounds (bounds);

}
window.onload = init;

Here is the html

<div data-role="page" id="mapEiffelTower" >

<div data-role="header">
    <a href="#homePage"  class="ui-btn-left ui-btn ui-icon-back ui-    

btn-icon-notext ui-shadow ui-corner-all"  data-role="button"   

role="button">Back</a>
    <img src="assets/Logo-01.png" id="logoHeader" alt="logo"/>
    <!--<a href="index.html" class="ui-btn ui-icon-bars ui-btn-icon-  

notext "></a>-->


</div> <!--end of header-->

<div data-role="content" >
<div id="map_canvas3">
</div>

</div> <!-- end of content -->



</div> <!-- end of mapEiffelTower page -->

And here is what it looks like for me now

!https://www.flickr.com/photos/rubberducky/16487881658/

Is there a line of code that I can enter to fix this problem?

geocodezip
  • 158,664
  • 13
  • 220
  • 245
RubberDucky4444
  • 2,330
  • 5
  • 38
  • 70
  • The [code as posted](http://jsfiddle.net/dmqb1urc/) works for me. What does _your_ HTML and CSS look like? – geocodezip Feb 28 '15 at 20:49
  • – RubberDucky4444 Feb 28 '15 at 20:57
  • please edit your question to include the requested information. It is hard to read in the comments. – geocodezip Feb 28 '15 at 20:58
  • [Using the HTML from your comment](http://jsfiddle.net/dmqb1urc/1/) doesn't change anything (still works in jsfiddle). – geocodezip Feb 28 '15 at 21:02
  • https://www.flickr.com/photos/rubberducky/16487881658/ – RubberDucky4444 Feb 28 '15 at 21:11
  • **@geocodezip, dr.molle, mureinik** you closed the question because you simply dont know the answer. Check the problem here http://jsfiddle.net/dmqb1urc/2/ – Ciccolina Mar 01 '15 at 01:05
  • 1
    Ciccolina Thank you for uderstanding...ive checked all the other supposed solutions on other stackoverflow questions but none of them seem to fix it...in fact they break the page – RubberDucky4444 Mar 01 '15 at 21:19
  • I didn't vote for the duplicate, regardless of what the system says, I voted to close because the code provided doesn't exhibit the issue. His link to a picture in the comments isn't helpful (I can't run a picture and this is a very common problem; the div has zero size when the map renders, so I know very well what it looks like, the posted code doesn't do that...). – geocodezip Mar 02 '15 at 04:47
  • 1
    So you think that I am making it all up...that what I say i'm experiencing is fake...Ciccolina kindly enough provided proof of what my problem is....i have looked at every other stackoverflow with the same search info and none of them have helped...its not like i havent tried fixing it myslef....thats why i asked here to hopefully find somebody patient and kind enough to help – RubberDucky4444 Mar 02 '15 at 06:49
  • Since you're using jquery mobile 1.4, use `pagecontainershow` to run google map code http://jsfiddle.net/wzss9t1f/ @geocodezip feel free to reopen the question and post an answer to get some rep. – Ciccolina Mar 02 '15 at 08:47
  • @CIccolina I reopend the question. Post your answer. – geocodezip Mar 02 '15 at 13:51
  • 1
    OMG thank you so much...you dont know how frustrating this has been...i spent all weekend trying to fix it for class today....you are my hero Ciccolina! – RubberDucky4444 Mar 02 '15 at 18:29

0 Answers0