How to fix errors in google maps javascript api 3 mobile

I met a serious problem when placing maps on Google Maps on the site, namely, not displaying / not fully displaying the map after loading the page, I noticed that there are many such topics and very few answers, and if you are a fan of searching answers somewhere in the outback forums, below I will give a few options for solving these problems with the initialization code, so sit back with popcorn and start reading

//google maps Api $("#companyform_showonmap_page").click(function(){ var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var myOptions = { zoom: 17, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, timeout: 6000, maximumAge: 50000, enableHighAccuracy:true } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } /* if ((company.getcompanygpslalo(gpslalo)!=0) && (company.getcompanygpslalo(gpslalo)!= null)){ map.setCenter(company.getcompanygpslalo(gpslalo)); // console.log(results[0].geometry.location.Ua);     // console.log(results[0].geometry.location.Va); var marker = new google.maps.Marker({ map: map, position: company.getcompanygpslalo(gpslalo) }); }else{*/ function codeAddress() { var address = document.getElementById("address").value; var gps = company.getgpslalo(); //          geocoder.geocode( { 'address': $("#companyform_gpscoords").val()}, function(results, status) { //        adress    JSON   console.log(company.getgpslalo(gps)); console.log(gps.la); console.log(gps.lo); if ((gps.la)>0 &&(gps.la)>0) { map.setCenter(new google.maps.LatLng((gps.la),(gps.lo))); pos = new google.maps.LatLng((gps.la),(gps.lo)); // console.log(results[0].geometry.location.Ua);      // console.log(results[0].geometry.location.Va); var marker = new google.maps.Marker({ map: map, position: pos }); } else { //             input' address if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); // console.log(results[0].geometry.location.Ua);      // console.log(results[0].geometry.location.Va); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("      : " + status); } //company.getcompanycoordinats(results[0].geometry.location.Ua,results[0].geometry.location.Va);      } }); } function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "http://maps.google.com/maps/api/js?sensor=true&callback;=initialize"; document.body.appendChild(script); } window.onload = loadScript; $.mobile.changePage("#companyform_showonmap_page"); window.onload = initialize(); window.onload = codeAddress(); }); 

All secret in function loadScript () and also in window.onload which need to be placed FOR $ .mobile.changePage. new google.maps.LatLng - we don’t forget to write this way, because otherwise Google will not understand what you want from it (changes for working with javascript google api v3). As you noticed, I wrote window.onload 2 times, although the function should be executed 1 time, but when working with Google maps for some reason, 2 times window.onload saved me, I don’t know what it is, but it works!
')
One more thing, I don’t know why, but when determining the size of the divʻa in%, the correct display is also not correct, the solution to this problem is very trivial and simple

 <div id="map_canvas" style="width: 100%; height: 500px; position:center;" ></div> 

Where map_canvas is the container in which our map is displayed.

The next problem is related to Google's geolocation, the same problem, drawing a map, below I give a complete example with the solution.

  $( "#map-page" ).live( "pageshow", function() var defaultLatLng = new google.maps.LatLng(37.530073, 15.112151); if ( navigator.geolocation ) { function success(pos) { // Location found, show coordinates on map drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); } function fail() { drawMap(defaultLatLng); // Show default map } // Find users current position navigator.geolocation.getCurrentPosition(success, fail, {enableHighAccuracy:true, timeout: 6000, maximumAge: 50000 }); } else { drawMap(defaultLatLng); // No geolocation support } function drawMap(latlng) { var myOptions = { zoom: 17, center: latlng, zoomControl: true, scaleControl: true, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map( document.getElementById("map-canvas"), myOptions); // Add an overlay to the map of current lat/lng var marker = new google.maps.Marker({ position: latlng, map: map, title: "  !" }); } }); 

The solution to this problem in these lines

 {enableHighAccuracy:true, timeout: 6000, maximumAge: 50000 } 

and again you cannot set the height of the div `where the map will be displayed in%.

These are recommendations that helped to configure the same display on both tablet / mobile and stationary devices. Although off. The Javascript google API 3 documentation has all the examples written in size in%, but in reality it’s a headache.

Another problem I did not find a solution to is the display of controls, they disappear on some cards, while others are displayed normally, all the difference is in the pages, the code is the same, and I haven’t found a bug yet.

The boss suggested an interesting solution, in practice it helped, the code below

 // Jquery      ,      $.getDocHeight = function(){ return Math.max( $(document).height(), $(window).height(), /* For opera: */ document.documentElement.clientHeight ); }; //alert( $.getDocHeight() ); $(".googlemap").height($.getDocHeight()-10); //  googlemap      $(".googlemap").width("98%");//     googlemap`  

and block cards with a mandatory class

 <div id="map_canvas" class="googlemap" style="position:center" ></div> 

I hope these tips will help readers quickly cope with the problems of displaying Google maps on mobile and on conventional devices.