Menu
I'm trying to set up a Google map that will display when a link is clicked and then hide when another link is clicked. Everything works fine, except when I show the map from display:none, it doesn't display properly.
I read about using google.maps.event.trigger(map, 'resize'); but I'm not proficient enough with Javascript and JQuery to know how to add it in.
Here's the code I've been using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <title></title> <style type="text/css"> #viewmap { position:relative; width:944px; float:left; display:none; } #hidemap { position:relative; width:944px; float:left; display:block; } #map_canvas { position:relative; float:left; width:944px; height:300px; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"> </script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(-27.999673,153.42855); var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var contentString = 'blah'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: latlng, map: map }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> <script type="text/javascript"> function toggleDiv1(viewmap){ if(document.getElementById(viewmap).style.display == 'block'){ document.getElementById(viewmap).style.display = 'none'; }else{ document.getElementById(viewmap).style.display = 'block'; } } function toggleDiv2(hidemap){ if(document.getElementById(hidemap).style.display == 'none'){ document.getElementById(hidemap).style.display = 'block'; }else{ document.getElementById(hidemap).style.display = 'none'; } } </script> </head> <body> <div id="viewmap"> <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">Hide map</a> <div id="map_canvas"></div> </div> <div id="hidemap"> <a href="#" onmousedown="toggleDiv1('viewmap'); toggleDiv2('hidemap');">View map</a> </div> </body> </html> Any help would be much appreciated,
Quintin
960
Step 1 Go to Add or Edit Map and Scroll down to the 'Infowindow Settings' section. Step 2 Enable the box of 'Hide Markers on Page Load' option. Step 3 Click on Save Map and open it in browser.
There are a several reasons why your google maps may not be working, the most common issue being no Google Map API key set or set incorrectly. To use the Google Maps JavaScript API, you must register your app project on the Google Cloud Platform Console and get a Google API key which you can add to your app.
I ran into this same problem today and eventually found this at the official Google Maps Javascript API V3 Reference:
Developers should trigger this event on the map when the div changes size:
google.maps.event.trigger(map, 'resize').
As display:none is equivalent to leaving the <div> with size 0, changing it to display:block becomes in fact a change of size, making therefore necessary to trigger the map resize event.
Worked like a charm for me.
UPDATE 2018-05-22
With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of Map class.
The documentation states
When the map is resized, the map center is fixed
The full-screen control now preserves center.
There is no longer any need to trigger the resize event manually.
source: https://developers.google.com/maps/documentation/javascript/new-renderer
google.maps.event.trigger(map, "resize"); doesn't have any effect starting from version 3.32
115
This problems also happens with the jquery tabs, instead of applying "display:none", you can try hidding the map in this way:
Add the following styles when you are trying to hide the map, instead of using display:none
position: absolute; left: -100%; You can also add transitions like: transition: left 1s ease;
You can try with google event listener triggering it after you display the map:
<script type="text/javascript"> var map; //I placed here the map variable so other functions can see it. var latlng = new google.maps.LatLng(-27.999673,153.42855); // in order to center again the map... function initialize() { var myOptions = { zoom: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); var contentString = 'blah'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: latlng, map: map }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); } google.maps.event.addDomListener(window, 'load', initialize); </script> <script type="text/javascript"> function toggleDiv1(viewmap){ if(document.getElementById(viewmap).style.display == 'block'){ document.getElementById(viewmap).style.display = 'none'; }else{ document.getElementById(viewmap).style.display = 'block'; //here is where your map is being displayed again, try here // to trigger the resize event. google.maps.event.trigger(map, 'resize'); map.setCenter(latlng); } } function toggleDiv2(hidemap){ if(document.getElementById(hidemap).style.display == 'none'){ document.getElementById(hidemap).style.display = 'block'; }else{ document.getElementById(hidemap).style.display = 'none'; } } </script> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With