Google Maps Ajax multiple markers Json

Question

I have a the following: https://jsfiddle.net/inkedraskal/h35dz9qd/5/

I'm getting a error: Cannot assign to read only property '__e3_' of 0

I previously had a for loop that called the function after the for loop, but jshint wasn't accepting it. So now I'm using Ajax but I am stuck. I can return the objects in the console as well as the first info box content (see console), then I get an error.

The js is as follows below: (any tips, tricks, etc would be appreciated)

(function () {
    renderGoogleMap();


    function renderGoogleMap() {
        var start_point = new google.maps.LatLng(0, 0);

        // Creating a new map
        var map = new google.maps.Map(document.getElementById("locations-map"), {
            center: start_point,
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });



        // Creating a global infoWindow object that will be reused by all markers
        var infoWindow = new google.maps.InfoWindow();

        function setMarkerPoints(map,marker) {
            var bounds = new google.maps.LatLngBounds();
            // Looping through the JSON data

                // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)



                $.ajax({
                   type: "GET",
                    url: 'https://raw.githubusercontent.com/roryheaney/jsonexample/master/locatoins.json',
                    dataType: "json",
                    success: function (data) {
                        console.log(data);

                        if (data.length !== 0) {

                         var   latLng = new google.maps.LatLng(data.lat, data.lng);

                        // Creating a marker and putting it on the map
                        var marker = new google.maps.Marker({
                            position: latLng,
                            map: map,
                            title: data.title
                        });


                            $.each(data, function (marker, data) {
                                var windowContent = '<h3>' + data.title + '</h3>' +
                                    '<p>' + data.description + '</p>';
                                console.log(windowContent);

                                // Attaching a click event to the current marker
                                infobox = new InfoBox({
                                    content: infoWindow.setContent(windowContent),
                                    alignBottom: true,
                                    pixelOffset: new google.maps.Size(-160, -45)
                                });

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

                                    // Open this map's infobox
                                    infobox.open(map, marker);
                                    infobox.setContent(windowContent);
                                    map.panTo(marker.getPosition());
                                    infobox.show();
                                });
                                google.maps.event.addListener(map, 'click', function () {
                                    infobox.setMap(null);
                                });
                            });

                        } 


                    },
                    error: function (data) {
                        // alert('Please refresh the page and try again');

                        console.log('Please refresh the page and try again');
                    }

                });
                //END MARKER DATA


                // bounds.extend(marker.getPosition());

            // end loop through json

            map.setCenter(start_point);
            map.fitBounds(bounds);
        }
        setMarkerPoints(map);
    }

})();

Answer 1

The list of changes:

1.Google Maps API contains it's own event that is triggered once the page is loaded, so i replaced the lines:

(function () {
    renderGoogleMap();

    //...


})();

with

function renderGoogleMap() {
    //...
  }

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

2.The initialization of marker lat/lng bounds have been added.

3.Some another minor fixes.

Working example

code snippet:

 function renderGoogleMap() { var start_point = new google.maps.LatLng(0, 0); // Creating a new map var map = new google.maps.Map(document.getElementById("locations-map"), { center: start_point, zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }); // Creating a global infoWindow object that will be reused by all markers var infoWindow = new google.maps.InfoWindow(); function setMarkerPoints(map, marker) { var bounds = new google.maps.LatLngBounds(); $.ajax({ type: "GET", url: 'https://raw.githubusercontent.com/roryheaney/jsonexample/master/locatoins.json', dataType: "json", success: function(data) { if (data.length !== 0) { $.each(data, function(marker, data) { var latLng = new google.maps.LatLng(data.lat, data.lng); bounds.extend(latLng); // Creating a marker and putting it on the map var marker = new google.maps.Marker({ position: latLng, map: map, title: data.title }); var windowContent = '<h3>' + data.title + '</h3>' + '<p>' + data.description + '</p>'; // Attaching a click event to the current marker infobox = new InfoBox({ content: infoWindow.setContent(windowContent), alignBottom: true, pixelOffset: new google.maps.Size(-160, -45) }); google.maps.event.addListener(marker, 'click', function() { // Open this map's infobox infobox.open(map, marker); infobox.setContent(windowContent); map.panTo(marker.getPosition()); infobox.show(); }); google.maps.event.addListener(map, 'click', function() { infobox.setMap(null); }); }); map.fitBounds(bounds); } }, error: function(data) { console.log('Please refresh the page and try again'); } }); //END MARKER DATA // end loop through json } setMarkerPoints(map); } google.maps.event.addDomListener(window, 'load', renderGoogleMap); // renderGoogleMap(); 

 #locations-map { display: block; height: 500px; } .infoBox { max-width: 300px; background: #fff; padding: 10px; border: 1px solid red; } .infoBox img { border: 1px solid yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> <div id="locations-map"></div>