I would like to change the marker icon, when the user hovers his mouse over a div tag. I found a close solution, where the marker icon changes when the user hovers his mouse over the marker itself. But I would like to change it using div tags.

The code:

var icon1 = "imageA.png";
var icon2 = "imageB.png";

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    id: 1,
    icon: icon1,
    title: "some marker"
});

google.maps.event.addListener(marker, 'mouseover', function() {
    marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
    marker.setIcon(icon1);
});

My set up shall look like this:

   <div class="sth" onmouseover="ShowMarker(id)" />

And my JS sth like:

    var icon1 = "imageA.png";
    var icon2 = "imageB.png";

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        id: 1,
        icon: icon1,
        title: "some marker"
    });

    function ShowMarker(id) {
    google.maps.event.addListener(marker, 'mouseover', function() {
        marker[id].setIcon(icon2);
    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        marker[id].setIcon(icon1);
    });

}

This code should change only the selected marker by id. Could anyone change my code to a working one? I would really appreciate it.

Thanks in advance.

I would like to change the marker icon, when the user hovers his mouse over a div tag. I found a close solution, where the marker icon changes when the user hovers his mouse over the marker itself. But I would like to change it using div tags.

The code:

var icon1 = "imageA.png";
var icon2 = "imageB.png";

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    id: 1,
    icon: icon1,
    title: "some marker"
});

google.maps.event.addListener(marker, 'mouseover', function() {
    marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
    marker.setIcon(icon1);
});

My set up shall look like this:

   <div class="sth" onmouseover="ShowMarker(id)" />

And my JS sth like:

    var icon1 = "imageA.png";
    var icon2 = "imageB.png";

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        id: 1,
        icon: icon1,
        title: "some marker"
    });

    function ShowMarker(id) {
    google.maps.event.addListener(marker, 'mouseover', function() {
        marker[id].setIcon(icon2);
    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        marker[id].setIcon(icon1);
    });

}

This code should change only the selected marker by id. Could anyone change my code to a working one? I would really appreciate it.

Thanks in advance.

• javascript
• jquery
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Jul 3, 2015 at 15:05 duncan 31.9k1515 gold badges8181 silver badges101101 bronze badges asked Jul 3, 2015 at 12:55 TiborTibor 9922 silver badges1111 bronze badges 1

• possible duplicate of Change icon of google map marker when onmouseover div (Google maps v3 api) – geocodezip Commented Jul 3, 2015 at 16:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You have to make a listener on the div you want :

<div class="sth" onmouseover="hover(1)" onmouseout="out(1)">MARKER 1</div> <div class="sth" onmouseover="hover(2)" onmouseout="out(2)">MARKER 2</div>

Then push your markers in another variable, and loop on it :

var allMarkers = [];
var marker = new ...();
allMarkers.push(marker);

function hover(id) {
    for ( var i = 0; i< allMarkers.length; i++) {
        if (id === allMarkers[i].id) {
           allMarkers[i].setIcon(icon2);
           break;
        }
    }
}

...

I've done a demo, with ments. Hope it helps :)