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>