javascript - Load Google Maps in HTML page when button is clicked -
i have html page list of buttons representing locations. when button clicked, want google map appear location. should map open on new html page? (because map should take full page), or possible display map on same page?
edit - ok, want open in html file. have external js file has following map code:
function initialize(lat, lng) { var mapoptions = { center: {lat: parsefloat(lat), lng: parsefloat(lng)}, zoom: 8, maptypeid : google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map-canvas"), mapoptions); } google.maps.event.adddomlistener(window, 'load', initialize(-34.397, 150.644)); my external html file given below:
<html> <head> <style type="text/css"> html, body, #map-canvas { height: 100%; margin: 0; padding: 0;} </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="script.js" ></script> </head> <body> <div id="map-canvas"></div> </body> </html> but not working. external js file cannot locate "map-canvas", seems. can tell me how fix this? (script.js external js file)
i worked around question try :
<!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" targe> show map3 </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