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

【问题标题】：How to display non static google map?如何显示非静态谷歌地图？
【发布时间】：2016-05-02 12:49:22
【问题描述】：

我通过看一些教程和阅读官方文档构建了以下代码sn-ps：

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

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

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

【问题讨论】：

你可以使用 &z=nn gis.stackexchange.com/a/115165
只需将center 替换为q How to obtain dynamic google map url of a specific map (I have static map url)

标签： javascript jquery google-maps

【解决方案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>

【讨论】：

这不是我想要的。事实上，我是通过让地图不显示为 IMG 来要求滚轮的。
使滚轮真正用于缩放地图老兄...我看到了基本脚本..您可以通过设置适当的属性来更改此地图中的任何内容
我确实尝试将其设置为 true。但是地图仍然显示为img，显然不能放大/缩小和移动。所以这个解决方案肯定对我的问题没有帮助。
非常感谢您能走到这一步。地图现在显示了所有需要的功能。但是，如果您查看我的代码，地图仅显示在 map-icon 上单击，而在您的示例中，它会在加载时显示。
您所要做的就是深入研究一下地图文档，然后您就可以从他们的示例中复制一个 sn-p。