2013-06-24 3 views
1

настоящее время я использую этот скрипт:Google Maps - Как добавить другую картину для каждого маркера

<script src="http://maps.google.com/maps/api/js?sensor=false" 
     type="text/javascript"></script> 

<div id="map" style="width: 800px; height: 800px;"></div>   

<script type="text/javascript"> 
var locations = [ 
    ['info1', 46.780961,6.64018], 
    ['info2', 46.511102,6.493958], 
    ['info3', 46.516786,6.629087], 
    ['info4', 46.442796,6.895498], 
    ['info5', 46.463002,6.843443] 
]; 

var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 10, 
    center: new google.maps.LatLng(46.519962,6.633597), 
    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)); 
} 
</script> 

Я не использую PHP/MySQL, но HTML, потому что карта действительно простые (только пять мест) и будет никогда не меняется.

Я хочу добавить РАЗНОЕ изображение (например: http://i.stack.imgur.com/GFfzy.jpg) для каждого маркера.

Возможно ли это?

Я не разработчик, и я понятия не имею, как это сделать.

Благодарим за помощь!

+0

возможный дубликат [Color первый маркер в Google Map другой цвет] (http://stackoverflow.com/questions/16900210/цвет-заместитель первого габаритного-оф-а-Google-карте-а-разного цвета) – geocodezip

ответ

1

Вы можете указать URL изображений при создании маркеров, как это:

var image = { 
    url: thumbnailUrl, 
    size: new google.maps.Size(20, 20), 
    origin: new google.maps.Point(0,0), 
    anchor: new google.maps.Point(10, 10) 
}; 

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

Проблемы здесь закрытие JavaScript.

Так вместо того, чтобы делать

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

вы должны сделать

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