Google Maps Ajax несколько маркеров JSon

Question

У меня есть следующие: https://jsfiddle.net/inkedraskal/h35dz9qd/5/

я получаю сообщение об ошибке: Не удается назначить только для чтения свойства «__e3_» от 0

Я ранее был цикл, который называется функция после цикла for, но jshint не принимал ее. Так что теперь я использую Ajax, но я застрял. Я могу вернуть объекты в консоли, а также содержимое первого информационного окна (см. Консоль), после чего я получаю сообщение об ошибке.

В JS как следует ниже: (любые советы, приемы и т.д. будут оценены)

(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

Список изменений:

1.Google Maps API содержит это собственное событие, которое срабатывает как только страница загружена, поэтому я заменил строки:

(function() { 
    renderGoogleMap(); 

    //... 


})(); 

с

function renderGoogleMap() { 
    //... 
    } 

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

2. Добавлена ​​инициализация границ маркера lat/lng.

3. Некоторые другие незначительные исправления.

Working example

фрагмент кода:

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>