Multiple markers on google maps using json and placeid

Question

the problem i've got is that I don't know where the problem is :P From the beginning. I've got 3 files, the json file JS and html. JS should get placeid from json and based on that place a marker on the map. It's all pretty simple but somehow it doesn't work, the map is being created but no markers show up. Here're the files:

JSON:

       [{   "placeid":   'ChIJu6HrLMVWIkcRWHTA90kiueI'              ,           "content":  "   1   "   }   ,
        {   "placeid":    'ChIJnXBuJ34zGUcRvt9FTKrPeeM'             ,           "content":  "   2   "   }   ,
        {   "placeid":    'ChIJiwUNhqX7PEcRdJjYqzrWYjs'             ,           "content":  "   3   "   }   ]

HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script src="functions_edit.js"></script>


</head>

<body>
<div id="map-canvas" style="width:500px; height:400px"></div>
</body>
</html>

JS:

var openedInfoWindow = null;

function initialize() {
        var latitude = 51.9315631,
            longitude = 19.473451,
            radius = 8000, 
            center = new google.maps.LatLng(latitude,longitude),
            mapOptions = {
                center: center,
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false
            };

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

        setMarkers(center, radius, map);
    }

    function setMarkers(center, radius, map) {
        var json = (function () { 
            var json = null; 
            $.ajax({ 
                'async': false, 
                'global': false, 
                'url': "placeid.json", 
                'dataType': "json", 
                'success': function (data) {
                     json = data; 
                 }
            });
            return json;
        })();


        for (var i = 0, length = json.length; i < length; i++) {
            var data = json[i];

                                var service = new google.maps.places.PlacesService(map);
                service.getDetails({
                    placeId: data.placeid
                }, function (result, status) {
                    if (status != google.maps.places.PlacesServiceStatus.OK) {
            alert(status);
            return;
        }
                    var marker = new google.maps.Marker({
                        map: map,
                        place: {
                            placeId: data.placeid,
                            location: result.geometry.location
                        }
                        //position: result.geometry.location
                    });
                });

                infoBox(map, marker, data);
            }
        }

    function infoBox(map, marker, data) {
        var infoWindow = new google.maps.InfoWindow();

        google.maps.event.addListener(marker, "click", function(e) {

            infoWindow.setContent(data.content);
            infoWindow.open(map, marker);
        });

        (function(marker, data) {

          google.maps.event.addListener(marker, "click", function(e) {

            infoWindow.setContent(data.content);
            infoWindow.open(map, marker);
          });
        })(marker, data);
    }

   google.maps.event.addDomListener(window, 'load', initialize);

geocodezip · Accepted Answer · 2019-03-20T17:06:42.337

With the posted code I get a javascript error: Uncaught ReferenceError: marker is not defined

You are calling the InfoBox function in the wrong place (outside the scope where marker exists).

Once I fix that I get infowindows, but you have an issue that can be solved by function closure (all the infowindows have the content "3", the last marker processed). (For an example of function closure see Google Maps JS API v3 - Simple Multiple Marker Example)

working fiddle

code snippet:

var placeid_json = [{
    "placeid": 'ChIJu6HrLMVWIkcRWHTA90kiueI',
    "content": "   1   "
}, {
    "placeid": 'ChIJnXBuJ34zGUcRvt9FTKrPeeM',
    "content": "   2   "
}, {
    "placeid": 'ChIJiwUNhqX7PEcRdJjYqzrWYjs',
    "content": "   3   "
}];


var openedInfoWindow = null;

function initialize() {
    var latitude = 51.9315631,
        longitude = 19.473451,
        radius = 8000,
        center = new google.maps.LatLng(latitude, longitude),
        mapOptions = {
            center: center,
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false
        };

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

    setMarkers(center, radius, map);
}

function setMarkers(center, radius, map) {
    /* var json = (function () { 
            var json = null; 
            $.ajax({ 
                'async': false, 
                'global': false, 
                'url': "placeid.json", 
                'dataType': "json", 
                'success': function (data) {
                     json = data; 
                 }
            });
            return json;
        })(); */

    var json = placeid_json;
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i];
        createMarker(data, map);
    }
}
function createMarker(data, map) {
            var service = new google.maps.places.PlacesService(map);
        service.getDetails({
            placeId: data.placeid
        }, function (result, status) {
            if (status != google.maps.places.PlacesServiceStatus.OK) {
                alert(status);
                return;
            }
            var marker = new google.maps.Marker({
                map: map,
                place: {
                    placeId: data.placeid,
                    location: result.geometry.location
                }
                //position: result.geometry.location
            });
            infoBox(map, marker, data, result);
        });

}
function infoBox(map, marker, data, result) {
    var infoWindow = new google.maps.InfoWindow();

    google.maps.event.addListener(marker, "click", function (e) {

        infoWindow.setContent(data.content);
        infoWindow.open(map, marker);
    });

    (function (marker, data) {

        google.maps.event.addListener(marker, "click", function (e) {

            infoWindow.setContent(data.content+"<br>"+result.name);
            infoWindow.open(map, marker);
        });
    })(marker, data);
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="width:500px; height:400px"></div>

Multiple markers on google maps using json and placeid

1 Answers1

Linked