Question

我正在尝试在div中加载googlemap。我的脚本如下

<script src="https://maps.googleapis.com/maps/api/js?

    key=AIzaSyAiy_9XkvL8a5-zsSV5jFpH8sHcth5HkpE&callback=myMap"></script>

    <script>
    function myMap() {
                var mapOptions = {
                    center: new google.maps.LatLng(19.015509, 72.843067),
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                }
                var map = new google.maps.Map(document.getElementById("map"), mapOptions);
            }
    </script>

在加载页面时，我收到错误。我附上了错误图片。

Answer 1

我不确切地知道你哪里错了。但是你得到的错误。功能设置不正确。或者它不在本地范围内。但您应该查看Google地图。如果你想要的地址。还有另一种方法可以将其纳入您的代码中。只需输入Google地图并选择通信，然后将其粘贴到代码中即可。我附上一个你可以理解的例子。我的意思是什么。

  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2702.5938589941825!2d8.640130883976095!3d47.36132677916924!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x479aa3ffb7057dbb%3A0x8dfd514b03a2c801!2sBodenacherstrasse+52%2C+8121+F%C3%A4llanden!5e0!3m2!1siw!2sch!4v1505149050010" frameborder="0" style="border:0" allowfullscreen></iframe>

Answer 2

在googleapis调用之前移动脚本myMap（）

<script>
    function myMap() {
                var mapOptions = {
                    center: new google.maps.LatLng(19.015509, 72.843067),
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.HYBRID
                }
                var map = new google.maps.Map(document.getElementById("map"), mapOptions);
            }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?

    key=AIzaSyAiy_9XkvL8a5-zsSV5jFpH8sHcth5HkpE&callback=myMap"></script>

Answer 3

您的脚本顺序错误。您正在加载没有defer async标记的Google Maps Javascript API v3，因此当它完成加载（内联）时，它将尝试调用函数myMap，该函数在脚本包含后定义（内联）。颠倒顺序。

概念证明：

fiddle with original order

错误：Uncaught Vb {message: "myMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Vb (https://maps.googleapis.com/m….googleapis.com/maps/api/js?callback=myMap:144:59"}

fiddle with reordered code

（没有错误，加载地图）

工作代码段

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<div id="map"></div>
<script>
  function myMap() {
    var mapOptions = {
      center: new google.maps.LatLng(19.015509, 72.843067),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

＆＃13;

Answer 4

Google使用initMap作为默认函数，因此请使用initMap()代替myMap()

试试这个：

function initMap() {
    var mapOptions = {
            zoom: 14,
            center: new google.maps.LatLng(19.015509, 72.843067),
            scrollwheel: false
        };

div中的Googlemap加载问题

4 个答案: