Google Maps v3-маркеры не отображаются

Я использую этот код. Надеюсь, это поможет вам:

(function() {

window.onload = function() {

    // Creating a new map
    var map = new google.maps.Map(document.getElementById("map"), {
      center: new google.maps.LatLng(41.056466, -85.3312009),
      disableDefaultUI: false,
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });


    // Creating the JSON data
    var json = [
        {
            "title": "Title 1",
            "lat": 41.057814980291,
            "lng": -85.329851919709,
            "description": ""
        },
        {
            "title": "Title 2",
            "lat": 41.057814981000,
            "lng": -85.8048,
            "description": ""
        },
    ]

    var styles = [
  {
   "featureType": "water",
   "elementType": "geometry.fill",
   "stylers": [
      { "visibility": "on" },
      { "color": "#0077bb" },
  { "lightness": 70 }
      ]
      },{
      "featureType": "landscape.natural",
      "elementType": "geometry.fill",
      "stylers": [
      { "visibility": "on" },
      { "saturation": -100 },
      { "color": "#699e6b" },
      { "lightness": 76 }
      ]
      },{
      "featureType": "poi.park",
      "elementType": "geometry.fill",
      "stylers": [
      { "visibility": "off" }
      ]
      },{
      "featureType": "road.local",
      "elementType": "geometry.fill",
      "stylers": [
      { "visibility": "on" },
      { "color": "#ffffff" }
      ]
      }
      ];

       map.setOptions({styles: styles});



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

    // Looping through the JSON data
    for (var i = 0, length = json.length; i < length; i++) {
        var data = json[i],
            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
        });

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

            // Attaching a click event to the current marker
            google.maps.event.addListener(marker, "click", function(e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });


        })(marker, data);

    }

}

   })();

это ответ на ответ @JoanManuelHernández, но я не могу опубликовать форматированный код в комментарии.

Я хотел бы предложить несколько незначительных улучшений. Один из них-это массив с именем json. Это не очень описательное имя; json может означать любые данные. Как о том, чтобы назвать это чем-то вроде places или locations или как?

далее, где у вас есть цикл, который создает закрытие для обработки асинхронного обратного вызова, я думаю, что немного легче понять, как это работает, если вы переместите все тело цикла в свою собственную функцию. Тогда вам не нужна встроенная анонимная функция. Итак, этот код:

// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++) {
    var data = json[i],
        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
    });

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

        // Attaching a click event to the current marker
        google.maps.event.addListener(marker, "click", function(e) {
            infoWindow.setContent(data.description);
            infoWindow.open(map, marker);
        });


    })(marker, data);
}

станет:

// Looping through the places list
for( var i = 0, length = places.length;  i < length;  i++ ) {
    addPlace( places[i] );
}

// Add one place marker
function addPlace( place ) {
    var latLng = new google.maps.LatLng( place.lat, place.lng );

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

    // Attaching a click event to the current marker
    google.maps.event.addListener( marker, "click", function(e) {
        infoWindow.setContent( place.description );
        infoWindow.open( map, marker );
    });
}

он делает то же самое, только немного проще.

один другая мысль: стилизованная карта очень крутая-я сам большой поклонник стилизованных карт-но мне интересно, следует ли ее оставлять здесь ради простоты, поскольку это не связано с вопросом OP?

не стесняйтесь включать любую из этих идей в свой собственный ответ, Если вам они нравятся, и если кто-то еще находит этот вариант полезным, пожалуйста, повторите ответ Джоан, так как именно оттуда исходил исходный код.