javascript - Google Maps map can be loaded only once -
i have page full of map triggers, when user clicks on these links, want create map javascript. works first time around, when close map , reopen it, content blank (except zoom, google logo, road/terrain dropdown). seems it's 'almost' working. doing wrong? tried empty content of map-canvas when hide map, issue persists. thanks
here html
<a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.507724100000019"> show map </a> and here javascript
var render_map = function( lat, lng, title ) { var mapcanvas = document.getelementbyid('map-canvas'); // options var args = { zoom : 16, center : new google.maps.latlng(lat, lng), maptypeid : google.maps.maptypeid.roadmap }; // create map var map = new google.maps.map( mapcanvas, args); // create marker var marker = new google.maps.marker({ position: args.center, map: map, title: title }); togglemap(); } var togglemap = function(){ if ($('body').hasclass('-show-map')) { maphide(); } else { mapshow(); }; } $('.map-trigger').on('click', function(event) { event.preventdefault(); var lat = $(this).data('lat'); var lng = $(this).data('lng'); render_map(lat, lng); });
i worked around samples work :
<!doctype html> <html> <head> <style> #map-canvas { width: 500px; height: 400px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script> </head> <body> <div> <a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.507724100000019"> show map1 </a> </div> <div> <a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.607724100000019"> show map2 </a> </div> <div> <a href="#" class="btn cta map-trigger" data-lat="41.8911684" data-lng="12.707724100000019"> show map1 </a> </div> <script> var render_map = function( lat, lng, title ) { var mapcanvas = document.getelementbyid('map-canvas'); // options var args = { zoom : 16, center : new google.maps.latlng(lat, lng), maptypeid : google.maps.maptypeid.roadmap }; // create map var map = new google.maps.map( mapcanvas, args); // create marker var marker = new google.maps.marker({ position: args.center, map: map, title: title }); togglemap(); } var togglemap = function(){ if ($('body').hasclass('-show-map')) { maphide(); } else { mapshow(); }; } $('.map-trigger').on('click', function(event) { event.preventdefault(); var lat = $(this).data('lat'); var lng = $(this).data('lng'); render_map(lat, lng); }); </script> <div id="map-canvas"></div> </body> </html>
Comments
Post a Comment