Geek Answers Handbook

Google map v3 not showing up fully in html5

google map v3 does not display fully in html5, phonegap. enter image description here

This map has drag and drop, here is the 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 offer me a solution where the problem is if I check it in firebug, which it will fully load and show the full map in the div.

+7
source share
4 answers

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

+1
source

Looking at your screenshot, it seems that mapcontrol occupies the necessary space, but the actual area of ​​the map is not large enough. Try moving your call to initialize (); so that it runs when the rest of the page loads, 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 could be to call the resize event, and after everything has loaded, control over the map will be retained, which is caused by calling google.maps.event.trigger(map, "resize"); (and call initialize() outside the finished function, as before).

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

Pls check the following:

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

Above is the div to display the map.

 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 of the above, do not work, so I did such a trick that gave the desired result. I write a mouse button over a function and call the code below

(1) Change

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

(2)

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

I had this problem in the past and posted my solution for a similar question .

The following is fixed:

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

Waiting for the status of the incomplete display of the map (that is, the completion of the download), and then an indication to change its size.

0
source

More articles:


All Articles