google map v3 is not fully displayed in html5

Question

google map v3 is not fully displayed in html5, phonegap. enter image description here

This map is drag-able, here is JavaScript code(main.js)

 var map;
 function initialize() {
 var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
 var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922);

 var myOptions = {
 center: myLatlng,
 zoom:5,
 mapTypeId: google.maps.MapTypeId.ROADMAP

 };
 map = new google.maps.Map(document.getElementById("map_canvas"),
 myOptions);

 setMarker(myLatlng);
 setMarker(myLatlng2);

 }

 function setMarker(p)
 {
 marker = new google.maps.Marker({
 position: p,
 title:"Hello World 2!"
 });
 marker.setMap(map);

 }

 initialize();

and here is my html

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <link rel="stylesheet"  href="css/jquery.mobile.css" />
 <link href="css/styles.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script>

 <script type="text/javascript" charset="utf-8" src="js/jquery-1.6.3.min.js"></script>
 <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.0.js"></script>
 <script type="text/javascript" charset="utf-8" src="js/tabs.js"></script>

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="jquery.ui.map/jquery.ui.map.js"></script>
 <script type="text/javascript" src="jquery.ui.map/jquery.ui.map.services.js"></script>
 <script type="text/javascript" charset="utf-8" src="js/main.js"></script>
 </head>
 <body>
 <div id="page-id" data-role="page" >
 <div id="map-container"><div id="map_canvas" style="height:600px; width:600px;"></div>  </div>

 </div>
 </body>
 </html>

css

   #map-container {
    padding: 6px;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #ccc #999 #ccc;
    -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
    box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
    width: 600px;
  }

  #map_canvas {
    width: 600px;
    height: 400px;
  }

Please suggest me solution where is the problem if I inspect it in firebug it loads completely and show a complete map in div.

score 1 · Answer 1 · answered Jul 19 '12 at 12:49

1

We had the same problem and we solved it by setting "max-width: none" on the map . But I don't remember why. :(

answered Jul 19 '12 at 12:49

fog

3,266
1
25
31

let me try but where to add max-width in css of map-canvas? I tried #map_canvas { width: 100%; max-width:none; height: 100%; } but doesn't make any difference – Ayesha Jul 19 '12 at 12:51
1

The code you posted has a specific height and width for the map_canvas div, the comment above you specify the height and width as percentage, which are you doing? The image you posted, is the classic symptom of a zero size map div, which can easily occur if percentage size isn't done correctly. – geocodezip Jul 19 '12 at 14:06
should I change its height and width to percentage? – Ayesha Jul 19 '12 at 15:23
I changed it to percentage, I want it to in full div, either in specific height width or percentage – Ayesha Jul 19 '12 at 15:30
Try to specify an explicit width and height (in px) for both the map-container and the map_canvas divs. If it works you can then move onward. – fog Jul 19 '12 at 15:50
#map_canvas { width: 300px; max-width:none; height: 300px; } ...........I dont know why nothing works here – Ayesha Jul 19 '12 at 17:23
I had the same problem. The above solution does not work :-( – G.A. Sep 16 '13 at 18:17

Karl-Johan Sjögren · Answer 2 · 2012-07-19T13:06:00.380

0

Looking at your screenshot it seems that the mapcontrol takes up the desired space but the actual map-area isn't large enough. Try to move your call to initialize(); so that it executes when the rest of the page has loaded and see if it helps.

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922);

  var myOptions = {
    center: myLatlng,
    zoom:5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  setMarker(myLatlng);
  setMarker(myLatlng2);
}

function setMarker(p)
{
  marker = new google.maps.Marker({
    position: p,
    title:"Hello World 2!"
  });
  marker.setMap(map);
}


$(document).ready(function() {
  initialize();
});

Another solution might be to call the resize event and have the map control remeasure itself after everything has loaded, that is done by calling google.maps.event.trigger(map, "resize"); (and call initialize() outside of the ready-function as before).

$(document).ready(function() {
  google.maps.event.trigger(map, "resize");
});

edited Jul 19 '12 at 13:06

answered Jul 19 '12 at 12:55

Karl-Johan Sjögren

16,544
7
59
68

Did you try the code you posted as a comment previously? I extended my sample a bit after seeing that one, not sure if the difference will help though. What system are you testing this on by the way? – Karl-Johan Sjögren Jul 19 '12 at 13:10
I am testing in web browser and android simulator, in both it seems same. and yes I added both of your solutions in my code – Ayesha Jul 19 '12 at 13:13
let me try the second option to call initialize() outside the document ready – Ayesha Jul 19 '12 at 13:17
Nooo if I put it outside the document ready it does not work even stop showing map...Actually I had already document ready method and all js was inside that method. – Ayesha Jul 19 '12 at 13:20
me too also facing the same problem..If you found any solution plz help me out . – Arpit Jul 22 '13 at 09:14
Facing same problem. Putting initialize in document ready does not even show the map. Only by putting it in $(document).on("pageinit", "#homepage", function() { .. does the map show up. But like other people, the map shows up great on first load. Once I navigate to some other page and come back, only half the map is seen and off towards the upper right. – G.A. Sep 16 '13 at 18:22

Abilash Raghu · Answer 3 · 2015-02-03T12:10:49.353

Pls check the following :

<div id="mapa"  style="width: 350px; height: 350px"></div>

Above is the div for map to be listed.

var map = new google.maps.Map(
document.getElementById('mapa'), {
center: new google.maps.LatLng(9.295680287227711, 76.87921151518822),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

I tried all the above wont work any so had done a trick like this which give desired result. I write a mouse over function and call the below code

(1) Modify

<div id="mapa" onmouseover="show_sidebar()" style="width: 350px; height: 350px"></div>

(2)

function show_sidebar(){
google.maps.event.trigger(map, 'resize');
}

score 0 · Answer 4 · edited May 23 '17 at 10:32

0

I've had this issue in the past and posted my solution to a similar question.

The following fixed it:

google.maps.event.addListenerOnce(map, 'idle', function() {
   google.maps.event.trigger(map, 'resize');
});

Waiting for the map's idle state (i.e. it's finished loading itself) and then telling it to resize itself.

edited May 23 '17 at 10:32

Community

1
1

answered Feb 03 '15 at 13:20

Ian Devlin

18,534
6
55
73

google map v3 is not fully displayed in html5

4 Answers4