Google Maps JS API v3 - простой пример с несколькими маркерами с пользовательскими маркерами

Question

Вот отличный пример простой карты Google: Google Maps JS API v3 - Пример простого множественного маркера

Я пытаюсь добавить в этот пример возможность назначать каждому производителю собственный значок. Учитывая связанный пример:

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 locations = [   
['Bondi Beach', -33.890542, 151.274856, 4,'images/icon1.png'],   
['Coogee Beach', -33.923036, 151.259052, 5,'images/icon2.png' ],   
['Cronulla Beach', -34.028249, 151.157507, 3,'images/icon3.png' ],   
['Manly Beach', -33.80010128657071, 151.28747820854187, 2,'images/icon4.png' ],   
['Maroubra Beach', -33.950198, 151.259302, 1,'images/icon5.png' ] ]; 

Заранее спасибо за ваши ответы!

Answer 1

Вот простая JSFiddle Demo , показывающая пользовательский маркер, созданный со следующими кодами. Вы можете настроить значок вашего маркера с помощью параметра icon при создании маркера. Например:

var marker = new google.maps.Marker({
   position: latlng,
   map: map,
   icon: 'http://www.kjftw.com/gmap/images/icons/numeric/red10.png',
   zIndex: Math.round(latlng.lat() * -100000) << 5
});

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

for(var i=0; i<locations.length; i++){
     myGlobalMarker.push(new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          icon: locations[i][4],
          title: locations[i][0]
     });
}

Где предполагается, что locations[i][1] - это лат, а locations[i][2] - это lng. Это не проверено, но это основа того, что вы можете сделать, чтобы создать собственный значок. myGlobalMarker - массив глобальных переменных, который содержит все маркеры. Я не уверен на 100%, нужен ли для местоположения значка абсолютный или относительный URL. Тем не менее, в моем приложении Google Map я смог использовать относительный путь для отображения собственного значка на моем маркере. Это конечный результат: