How do i change the icon of a marker on google maps when I mouseover the text in a div? I managed to change the marker icon onmouseover the marker in the map itself using

google.maps.event.addListener(marker1, "mouseover", function(event) {
            this.setIcon(";chld=1|ffffff|c41200");
}

EDIT:

Here is what I have now:

function initialize(){
....
var marker1 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map,

            icon: ";chld=1|c41200|ffffff"

        }); 
....
}


function changeMarker(marker) {

            alert(marker);

    }

and

<div id="searchresult" onmouseover="changeMarker(marker1)">

I'm using Chrome. In the console, onmouseover the div I get the error "Uncaught ReferenceError: marker1 is not defined"

How do i change the icon of a marker on google maps when I mouseover the text in a div? I managed to change the marker icon onmouseover the marker in the map itself using

google.maps.event.addListener(marker1, "mouseover", function(event) {
            this.setIcon("http://chart.apis.google./chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
}

EDIT:

Here is what I have now:

function initialize(){
....
var marker1 = new google.maps.Marker({  

            position: new google.maps.LatLng(1.288693,103.846733),

            map: map,

            icon: "http://chart.apis.google./chart?chst=d_map_pin_letter&chld=1|c41200|ffffff"

        }); 
....
}


function changeMarker(marker) {

            alert(marker);

    }

and

<div id="searchresult" onmouseover="changeMarker(marker1)">

I'm using Chrome. In the console, onmouseover the div I get the error "Uncaught ReferenceError: marker1 is not defined"

• javascript
• google-maps

• On a side note, I would remove the php tag, since this question has nothing to do with php. I'd do it myself, but I don't yet have the privileges to retag questions. – matzahboy Commented May 18, 2011 at 23:14

3 Answers 3

Add a onmouseover property to the div. Let's say it was called changeMarker.

function changeMarker(marker) {
    var icon = new Google.maps.MarkerImage({ url:"http://chart.apis.google./chart?chst=d_map_pin_letter&chld=1|ffffff|c41200"});
    marker.setIcon(icon);
}

Your div could then look like:

<div onmouseover="changeMarker(marker1)">

I would remend however caching the MarkerImage (since it seems pretty static) so that Google doesn't need to keep regenerating the graph image.

You can set other properties of the image. See the documentation

google.maps.event.addListener(marker1, 'mouseover', function () {
    marker1.setIcon('miniMarker.png');                      
 });

first call initialize function, define marker1 and then use this code, You can also call this function from different ways like you want on div mouse over etc.

I'm using Chrome. In the console, onmouseover the <div> I get the error:

Uncaught ReferenceError: marker1 is not defined

If you set variable like this:

function a() {
  var marker1 = "foo";
}

alert(marker1);

marker1 is not accessible at "window" level. You have to write it like this:

var marker1;

function a() {
  marker1 = "foo";
}

alert(marker1);