'Google Map not displayed . Error InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

I am using google maps js to show Map and load the markers on it . It was working fine . But suddenly got following error

"InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama"

Here is the code i am using

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

Can anybody hemlp me what is the issue ? what is the fix ?

Thanks

google-maps

Solution 1:^[1]

remove this line:

marker.setMap(map);

map is not a google.maps.Map (it's the div )

You don't need this line at all, because the map-property of marker already has been set.

What you need are the variables(lat,lox,lat1,lon1,lat2,lon2), without them you will not get the map and the markers

Solution 2:^[2]

use this way:-

 $(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"
            });
         });

Solution 3:^[3]

In your code, you initialized map as below:

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

And you set map in marker as below

marker.setMap(map);

It should be

marker.setMap(mapObject);

below code will work perfaclty.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Nitin

'Google Map not displayed . Error InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]