2016-04-04 8 views
1

Эй У меня есть цикл продукта, где каждый продукт имеет свои собственные данные-расположение = «номер»Изменить Google Maps маркер по щелчку

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

<button class="btn" data-location="80"></button> 
<button class="btn" data-location="81"></button> 
<button class="btn" data-location="82"></button> 

так, что маркер с данными натурных = «80» становится зеленым или изменяет изображение на мыши

вот моя addMarker функция

function addMarker(location) { 
    location.Position = { 
     lat: parseFloat(location.mapURL.split(',')[0]), 
     lng: parseFloat(location.mapURL.split(',')[1]) 
    }; 

    location.Marker = new google.maps.Marker({ 
     icon: 'images/map-marker-blue-2.png', 
     map: map, 
     position: location.Position, 
     title: location.name, 
    }); 
} 

дайте мне знать, если вам нужно больше информации

ответ

0

Вы можете сделать с SetIcon

marker.setIcon('newImage.png'); 

Вы должны использовать массив маркеров заселенного маркера создать

var markers ; 
function addMarker(location) { 
    location.Position = { 
    lat: parseFloat(location.mapURL.split(',')[0]), 
    lng: parseFloat(location.mapURL.split(',')[1]) 
}; 

location.Marker = new google.maps.Marker({ 
    icon: 'images/map-marker-blue-2.png', 
    map: map, 
    position: location.Position, 
    title: location.name, 
}); 
markers.push[location.Marker]; 

}

, то вы можете использовать функцию нажатия кнопки с рефами для маркеров ид

<button class="btn" data-location="80" onclick="changeMarker(80);"></button> 

function changeMarker(id){ 
    markers[id].setIcon('newImage.png'); 
} 
Смежные вопросы