单击按钮后，在HTML页面中加载Google Maps

Question

我有一个HTML页面，其中包含代表位置的按钮列表。 单击任何按钮时，我希望Google地图显示在该位置。 地图应该在新的HTML页面上打开吗？ （因为地图应占据整页），还是可以在同一页面上显示地图？

编辑-确定，我想在另一个HTML文件中打开它。 我有一个外部JS文件，其中包含以下Map代码：

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文件找不到“ map-canvas”。 谁能告诉我该如何解决？ （script.js是外部JS文件）

Answer 1

我解决了您的问题，请尝试以下操作：

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

单击按钮后，在HTML页面中加载Google Maps

问题描述

1 个解决方案

解决方案1
0 2015-06-13 13:30:31

单击按钮后，在HTML页面中加载Google Maps

问题描述

1 个解决方案

解决方案1 0 2015-06-13 13:30:31

解决方案1
0 2015-06-13 13:30:31