3

I'm a beginner with Javascript, and I am trying to deal with the API of Google maps.

I have two tabs, one with a map. When I open the page, the map loads, everything ok. But if I go to the other tab, and return, the map doesnt load. If I double click on the map, it loads normally. I have been reading some posts, like Google maps in hidden div, but no results.

My HTML is:

<head> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAxuujeWPQQygBjre-AD3U8p_tLNZgdw-4" async defer></script> </head> <body onload="initMap()"> <main id="main"> <section id="tabs"> <ul> <li><a href="#tab1" onclick="initMap()">Map tab</a></li> <li><a href="#tab2">Tab for test</a></li> </ul> <section id="tab1"> <section style="position: relative; width: 500px; padding-top: 500px; overflow: hidden;"> <div style="position: absolute; top: 0px; width: 500px; height: 500px;"> <div id="map" style="height:500px;"></div> </div> </section> </section> <section id="tab2"> <div> Tab for testing </div> </section> </section> </main> <script> </script> </body>

And my scripts, for Google Maps:

<script> var map; function initMap() { var styleArray = [ { featureType: 'all', stylers: [ { saturation: -80 } ] },{ featureType: 'road.arterial', elementType: 'geometry', stylers: [ { hue: '#00ffee' }, { saturation: 50 } ] },{ featureType: 'poi.business', elementType: 'labels', stylers: [ { visibility: 'off' } ] }]; // Coordinates var coord = {lat: <?php echo '40.689095'; ?>, lng: <?php echo '-74.044640'; ?>}; // Icon var imagen2 = "img/img_web/marker2.png"; //Create map map = new google.maps.Map(document.getElementById('map'), { center: coord, zoom: 13, styles: styleArray }); var markerZ = new google.maps.Marker({icon: imagen2, map: map, position: coord}); }; </script>

Script for tabs:

<script> $(function() { $( "#tabs" ).tabs({ activate:function(event,ui){ localStorage.setItem("lastTab",ui.newTab.index() ); }, active: localStorage.getItem("lastTab") || 0 }); }); </script>

Does anybody know what I am doing wrong?

N.

Improve this question
3
  • have you tried google.maps.event.trigger(map, 'resize'); , when your tab changes? Commented May 25, 2017 at 11:46
  • added solution to answer, we need to resize map when your first tab is clicked / active Commented May 25, 2017 at 11:50
  • Please put solutions into answer posts, not your question. Commented May 28, 2017 at 11:20

2 Answers 2

Reset to default
3

Try this:

<script> $(function() { $( "#tabs" ).tabs({ activate:function(event,ui){ google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() ); localStorage.setItem("lastTab",ui.newTab.index() ); }, active: localStorage.getItem("lastTab") || 0 }); }); </script>
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you, this works! Unfortunately, when I try to implement that in my website, it doesn't works, so I will need to check more things… Thanks anyway!
I made it work in the website: weird solution, but it works ;)
-1

Try to resize the map when you activate the tab:

$(function() { $( "#tabs" ).tabs({ activate:function(event,ui){ if (ui.newTab.index() == 0) { google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() ); } localStorage.setItem("lastTab",ui.newTab.index() ); }, active: localStorage.getItem("lastTab") || 0 }); });
Improve this answer

1 Comment

Yes, and it works perfectly! But I have a problem with the order of the tabs: if the map tab is the second one, doesn't load if you dont double click. If is the first, it loads, but has a problem with the centering. I am trying to deal with it…