Загрузите Карты Google на странице HTML при нажатии кнопки

У меня есть страница HTML со списком кнопок, представляющих местоположения. При нажатии любой кнопки я хочу, чтобы в этом месте отображалась карта Google. Должна ли карта открываться на новой странице HTML? (потому что карта должна занимать полную страницу), или можно отобразить карту на той же странице?Загрузите Карты Google на странице HTML при нажатии кнопки

EDIT - ОК, я хочу открыть его в другом HTML-файле. У меня есть внешний файл JS, который имеет следующий код карты:

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));

Мой внешний HTML-файл приведен ниже:

<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>

но не работает. Кажется, внешний внешний JS-файл не может найти «карту-холст». Может ли кто-нибудь сказать мне, как это исправить? (Script.js это внешний файл JS)

источник

2015-06-13 user3033194

вы можете сделать это как путь. – Aabid

Я работал вокруг вопроса попробовать это:

<!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>

источник

2015-06-13 13:30:31 scaisEdge

Загрузите Карты Google на странице HTML при нажатии кнопки

ответ

Смежные вопросы