View Full Version : Google Maps Pin Icon

09-02-2011, 11:59 PM
We got a google maps with a bunch of pins. Each pin is setup to use our blue custom icon image.

I'm trying to make it so that when you click on a pin, that particular pin changes to a green version of the icon, and all the reset stay blue. If the user clicks another pin, it turns green and the previous goes back to blue.

Basicly only the clicked active pin should be green.

google.maps.event.addListener(markers[indx], 'click', function() {

Here is my code so far that will change the clicked pin into a green version.

My problem is all attempts to change all pins back to blue prior to changing this clicked pin to green fails bad.

Anyone know how to do this or point me in the right direction?

09-03-2011, 02:45 AM
this might help. you can store a reference easily enough to which marker just got changed, the tricky part (for me anyway) was making the click listeners unique

<!DOCTYPE html>
<title>Google Maps change icon onclick</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markerchanged;
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP

map = new google.maps.Map(document.getElementById('map_canvas'),


points = [new google.maps.LatLng(-20.363882, 135.044922),
new google.maps.LatLng(-20.363882, 131.044922),
new google.maps.LatLng(-25.363882, 131.044922),
new google.maps.LatLng(-25.363882, 135.044922)];

function createMarker(latlng) {
var marker = new google.maps.Marker({
position: latlng,
icon: "/images/bluemarker.png",
map: map,

google.maps.event.addListener(marker, 'click', function() {
if (markerchanged) {markerchanged.setIcon("/images/bluemarker.png");}

function setMarkers() {
// Add markers to the map
for (var i = 0; i < points.length; i++) {
var loc = points[i];
var marker = createMarker(loc);
google.maps.event.addDomListener(window, 'load', initialize);

<div id="map_canvas" style="height:500px"></div>

09-08-2011, 10:53 PM
Thankx1000 xelawho!

Just as a note to self, add this prior to any GM options setup:

var markerchanged;

Then at the end of our pin's click event add the following to the end of the event:

if (markerchanged) {markerchanged.setIcon("#{facesContext.externalContext.requestContextPath}/mimages/bluemarker.png");}