Question

我通过观看一些教程和阅读官方文档来构建以下代码片段：

    HTML:

    <div class="map-area">
    <img id="fancybutton" class="icon map_icon" src="../location.png" />
    <div id="map-canvas"></div>
    </div>

jQuery:

    $('.map_icon').click(function(){

            var mapOptions = new google.maps.Map( mapDiv, {

                    center: { lat: -34.397, lng: 150.644 },
                    zoom: 8

            } );

            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);


    });

我确实有效，但它显示静态地图如下：

<img src="https://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&amp;1i59992&amp;2i39244&amp;2e1&amp;3u8&amp;4m2&amp;1u400&amp;2u400&amp;5m5&amp;1e0&amp;5sda-DK&amp;6sus&amp;10b1&amp;12b1&amp;token=46934" style="width: 400px; height: 400px;">

如何显示用户可以放大/缩小的常规谷歌地图等？

非常感谢任何帮助或指导。

Answer 1

您只需：参考https://developers.google.com/maps/documentation/javascript/：

    <html>

  <script src="http://maps.googleapis.com/maps/api/js"></script>

  <script type="text/javascript"> 

  $( document ).ready(function() {
        $('.map_icon').click(function(){ 
           initialize();
        });
  });
  function initialize() {
    var mapProp = {
      center:new google.maps.LatLng(51.508742,-0.120850),
      zoom:5,
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
  }
  </script>

  <body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
   <a id="fancybutton" class="icon map_icon">Load Map</a>
  </body>

</html>

如何显示非静态谷歌地图？

1 个答案: