Следуя ответу Даниэля Вассалло , вот версия, которая имеет дело с проблемой замыкания более простым способом.

Так как все маркеры будут иметь отдельный InfoWindow , и поскольку JavaScript не волнует, добавили ли вы дополнительные свойства к объекту, все, что вам нужно сделать, это добавить InfoWindow в свойства [] маркера , а затем вызвать .open() на InfoWindow от себя!

Редактирование: при наличии достаточного количества данных, pageload может занимать много времени, поэтому вместо создания InfoWindow с маркером конструкция должна произойти только тогда, когда это необходимо. Обратите внимание, что любые данные, используемые для создания InfoWindow , должны быть добавлены к маркеру как свойство (data). Также обратите внимание, что после первого события клика infoWindow будет сохраняться как свойство его маркера, поэтому браузеру не нужно постоянно восстанавливать.

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

var map = new google.maps.Map(document.getElementById('map'), {
  center: new google.maps.LatLng(-33.92, 151.25)
});

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    data: {
      name: locations[i][0]
    }
  });
  marker.addListener('click', function() {
    if(!this.infoWindow) {
      this.infoWindow = new google.maps.InfoWindow({
        content: this.data.name;
      });
    }
    this.infoWindow.open(map,this);
  })
}

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

It также устраняет стандартное назначение маркера и ускоряет обработку, напрямую назначая новый маркер массиву маркеров при создании маркеров. Обратите внимание, однако, что дополнительные свойства были добавлены как к маркеру, так и к infowindow, поэтому этот подход является немного нетрадиционным ... но это я!

Это никогда не упоминается в этих заданных вопросах, что стандартное infowindow НЕ помещается в lat и lng точки маркера, а скорее в верхнюю часть изображения маркера. Видимость маркера должна быть скрыта, чтобы это работало, иначе API Карт снова запустит привязку infowindow обратно в верхнюю часть изображения маркера.

Ссылка на маркеры в массиве «маркеры» создается немедленно при объявлении маркера для любых дополнительных задач обработки, которые могут потребоваться позже (скрытие / показ, захват коордов и т. д.). Это сохраняет дополнительный шаг назначения объекта маркера «маркеру», а затем нажимает «маркер» на массив маркеров ... много ненужной обработки в моей книге.

Во всяком случае, другой подход на infowindows и надеемся, что это поможет вам информировать и вдохновить вас.

    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
    var map;
    var markers = [];

    function init(){
      map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var num_markers = locations.length;
      for (var i = 0; i < num_markers; i++) {  
        markers[i] = new google.maps.Marker({
          position: {lat:locations[i][1], lng:locations[i][2]},
          map: map,
          html: locations[i][0],
          id: i,
        });

        google.maps.event.addListener(markers[i], 'click', function(){
          var infowindow = new google.maps.InfoWindow({
            id: this.id,
            content:this.html,
            position:this.getPosition()
          });
          google.maps.event.addListenerOnce(infowindow, 'closeclick', function(){
            markers[this.id].setVisible(true);
          });
          this.setVisible(false);
          infowindow.open(map);
        });
      }
    }

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

Здесь работает JSFiddle

Дополнительная заметка Вы заметите в этом Данные примера Google - четвертое место в массиве «местоположения» с номером. Учитывая это в этом примере, вы также можете использовать это значение для идентификатора маркера вместо текущего значения цикла, так что ...

var num_markers = locations.length;
for (var i = 0; i < num_markers; i++) {  
  markers[i] = new google.maps.Marker({
    position: {lat:locations[i][1], lng:locations[i][2]},
    map: map,
    html: locations[i][0],
    id: locations[i][3],
  });
};

Принятый ответ, переписанный в ES6:

$(document).ready(() => {
  const mapEl = $('#our_map').get(0); // OR document.getElementById('our_map');

  // Display a map on the page
  const map = new google.maps.Map(mapEl, { mapTypeId: 'roadmap' });

  const buildings = [
    {
      title: 'London Eye, London', 
      coordinates: [51.503454, -0.119562],
      info: 'carousel'
    },
    {
      title: 'Palace of Westminster, London', 
      coordinates: [51.499633, -0.124755],
      info: 'palace'
    }
  ];

  placeBuildingsOnMap(buildings, map);
});


const placeBuildingsOnMap = (buildings, map) => {
  // Loop through our array of buildings & place each one on the map  
  const bounds = new google.maps.LatLngBounds();
  buildings.forEach((building) => {
    const position = { lat: building.coordinates[0], lng: building.coordinates[1] }
    // Stretch our bounds to the newly found marker position
    bounds.extend(position);

    const marker = new google.maps.Marker({
      position: position,
      map: map,
      title: building.title
    });

    const infoWindow = new google.maps.InfoWindow();
    // Allow each marker to have an info window
    google.maps.event.addListener(marker, 'click', () => {
      infoWindow.setContent(building.info);
      infoWindow.open(map, marker);
    })

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  })
})

Асинхронная версия:

<script type="text/javascript">
  function initialize() {
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;
  </script>

Добавить маркер в вашу программу очень просто. Вы можете добавить этот код:

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: 'Hello World!'
});

Следующие поля особенно важны и обычно устанавливаются при создании маркера:

• position (обязательно ) определяет LatLng, определяющий начальное местоположение маркера. Один из способов получения LatLng - использование службы геокодирования .
• map (необязательно) указывает карту, по которой нужно поместить маркер. Если вы не укажете карту при построении маркера, маркер будет создан, но не будет привязан к карте (или отображен). Вы можете добавить маркер позже, вызвав метод setMap() маркера.

Обратите внимание: в этом примере поле заголовка задает заголовок маркера, который будет отображаться как всплывающая подсказка.

Здесь вы можете ознакомиться с Google api documenation здесь .

Это полный пример установки маркера one на карте. Будьте внимательны, вам нужно заменить YOUR_API_KEY на ваш ключ API google :

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <title>Simple markers</title>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
 <div id="map"></div>
<script>

  function initMap() {
    var myLatLng = {lat: -25.363, lng: 131.044};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: myLatLng
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'Hello World!'
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Теперь, если вы хотите вы должны сделать вот так:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function initMap() {
  var myLatLng = {lat: -33.90, lng: 151.16};

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: myLatLng
    });

  var count;

  for (count = 0; count < locations.length; count++) {  
    new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
      });
   }
}

В этом примере дайте мне следующий результат:

Вы также можете добавить инфо-окно в свой вывод. Вам просто нужен этот код:

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[count][1], locations[count][2]),
    map: map
    });

marker.info = new google.maps.InfoWindow({
    content: 'Hello World!'
    });

Здесь вы можете найти документацию Google о infoWindows здесь .

Теперь мы можем открыть инфо-окно когда маркер «clik» выглядит следующим образом:

var marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[count][1], locations[count][2]),
     map: map
     });

marker.info = new google.maps.InfoWindow({
     content: locations [count][0]
     });


google.maps.event.addListener(marker, 'click', function() {  
    // this = marker
    var marker_map = this.getMap();
    this.info.open(marker_map, this);
    // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
            });

Обратите внимание, что вы можете иметь документацию о Listener здесь в разработчике Google.

И, наконец, мы можем построить infoWindow в маркере, если пользователь нажмет на него. Это мой полный код:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Info windows</title>
    <style>
    /* Always set the map height explicitly to define the size of the div
    * element that contains the map. */
    #map {
        height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>

    var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];


    // When the user clicks the marker, an info window opens.

    function initMap() {
        var myLatLng = {lat: -33.90, lng: 151.16};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: myLatLng
            });

        var count=0;


        for (count = 0; count < locations.length; count++) {  

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[count][1], locations[count][2]),
                map: map
                });

            marker.info = new google.maps.InfoWindow({
                content: locations [count][0]
                });


            google.maps.event.addListener(marker, 'click', function() {  
                // this = marker
                var marker_map = this.getMap();
                this.info.open(marker_map, this);
                // Note: If you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindowOptions object literal.
                });
        }
    }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>
</html>

Обычно вы должны иметь этот результат:

Я думал, что я бы поставил это здесь, поскольку он, похоже, является популярной точкой посадки для тех, кто начинает использовать API Карт Google. Несколько маркеров, отображаемых на стороне клиента, вероятно, являются падением многих характеристик приложений сопоставления. Трудно тестировать, исправлять и в некоторых случаях даже устанавливать проблему (из-за различий в реализации браузера, оборудования, доступного клиенту, мобильных устройств, список продолжается).

Самый простой способ начать эту проблему - использовать решение кластеризации маркеров. Основная идея состоит в том, чтобы группировать географически похожие местоположения в группу с количеством отображаемых точек. По мере того, как пользователь приближается к карте, эти группы расширяются, чтобы показывать отдельные маркеры внизу.

Возможно, проще всего реализовать библиотеку markerclusterer . Основная реализация будет следующей (после импорта библиотеки):

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Маркеры вместо добавления непосредственно к карте добавляются в массив. Затем этот массив передается в библиотеку, которая обрабатывает сложные вычисления для вас и прикрепляется к карте.

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

Другие версии доступны в Google.

Надеюсь, что это поможет некоторым из тех, кто новее к нюансам картографии.

Вот почти полная функция javascript, которая позволит использовать несколько маркеров в JSONObject.

Он отображает только маркеры, которые находятся в границах карты.

Это важно, поэтому вы не делаете дополнительной работы.

Вы также можете установить ограничение на маркеры, чтобы вы не показывали экстремальное количество маркеров (если есть возможность использования в вашем использовании);

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

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

В снимке экрана действий небольшое изменение в снимке экрана показывает больше содержимого в инфо-окне. , вставленный из pastbin.com

<script src="//pastebin.com/embed_js/uWAbRxfg"></script>

Из образцов API Карт Google :

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  setMarkers(map, beaches);
}

/**
 * Data for the markers consisting of a name, a LatLng and a zIndex for
 * the order in which these markers should display on top of each
 * other.
 */
var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
  // Add markers to the map

  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.

  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.
  var image = new google.maps.MarkerImage('images/beachflag.png',
      // This marker is 20 pixels wide by 32 pixels tall.
      new google.maps.Size(20, 32),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is the base of the flagpole at 0,32.
      new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML <area> element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}