谷歌地图未显示。错误 InvalidValueError: setMap: not an instance of Map;而不是 StreetViewPanorama 的一个实例答案

【问题标题】：Google Map not displayed . Error InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama谷歌地图未显示。错误 InvalidValueError: setMap: not an instance of Map;而不是 StreetViewPanorama 的一个实例
【发布时间】：2014-11-07 23:44:28
【问题描述】：

我正在使用谷歌地图 js 来显示地图并在其上加载标记。它工作正常。但是突然出现以下错误

“InvalidValueError: setMap: 不是 Map 的实例；也不是 StreetViewPanorama 的实例”

这是我正在使用的代码

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

    $(document ).ready(function(){
        var lax;
        var lox; 
        var zlevel = Math.round(14-Math.log(20)/Math.LN2);

        var userLatLng = new google.maps.LatLng(lax, lox);

        var myOptions = {
            zoom :  zlevel ,
            center : userLatLng,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        // Draw the map
        var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);


        var userLatLng = new google.maps.LatLng(lat1, lon1);

        var marker = new google.maps.Marker({
            map: mapObject,
            icon: './images/icons/regular.png',
            position: userLatLng,
            title:name,
            url: './index.php',
        });     

        var userLatLng = new google.maps.LatLng(lat2, lon2);

        var marker = new google.maps.Marker({
            map: mapObject,
            icon: './images/icons/regular.png',
            position: userLatLng,
            title:name,
            url: './index.php',
        });     

        google.maps.event.addListener(marker, 'click', function() {
            window.location.href = this.url;  //changed from markers[i] to this[i]
        });                         
        marker.setMap(map);
    });

<div id="map"></div>

任何人都可以帮助我解决问题吗？解决方法是什么？

谢谢

【问题讨论】：

标签： google-maps

【解决方案1】：

删除这一行：

marker.setMap(map);

map 不是 google.maps.Map（它是 div）

你根本不需要这行，因为marker 的map-property 已经设置好了。

你需要的是变量（lat,lox,lat1,lon1,lat2,lon2），没有它们你将无法获得地图和标记

【讨论】：

【解决方案2】：

这样使用：-

 $(document).ready(function(){
            var gtpCoOrdsGTP = new google.maps.LatLng(12.97283,77.72024);
         var mapPropGTP = { 
                center:gtpCoOrdsGTP,
                zoom:18,
                mapTypeId:google.maps.MapTypeId.ROADMAP
              };
          var mapGTP=new  google.maps.Map(document.getElementById("googleMapGTP"),mapPropGTP);
          var markerGTP = new google.maps.Marker({
                      position: gtpCoOrdsGTP,
                      map: mapGTP,
                      title: "my title"
            });
         });

【讨论】：

【解决方案3】：

在您的代码中，您初始化地图如下：

// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);

你在标记中设置地图如下

marker.setMap(map);

应该是

marker.setMap(mapObject);

下面的代码可以完美运行。

<html>
<head>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBrzfgGntjIVECT_T8yHY5kf3dwH6ltz6c"></script>
<script type="text/javascript">

    $(document ).ready(function(){
        var lax;
        var lox; 
        var zlevel = Math.round(14-Math.log(20)/Math.LN2);

        var userLatLng = new google.maps.LatLng(lax, lox);

        var myOptions = {
            zoom :  zlevel ,
            center : userLatLng,
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };

        // Draw the map
        var mapObject = new google.maps.Map(document.getElementById("myMap"), myOptions);


        var userLatLng = new google.maps.LatLng(23.022505, 72.571362);

        var marker = new google.maps.Marker({
            map: mapObject,
            icon: 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png',
            position: userLatLng,
            title:"one",
            url: './index.php',
        });     

        var userLatLng = new google.maps.LatLng(21.170240, 72.831061);

        var marker = new google.maps.Marker({  map: mapObject,
            icon: 'https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png',
            position: userLatLng,
            title:"two",
            url: './index.php',
        });     

        google.maps.event.addListener(marker, 'click', function() {
            window.location.href = this.url;  //changed from markers[i] to this[i]
        });                         
        marker.setMap(mapObject);
    });
    </script>
</head>
<body>
<div id="myMap" style="height:400px;width:400px">

</div>
</body>
</html>

【讨论】：