Question

I am using the following code to cause the marker on the map to change when a user places his mouse over a div. Marker1 is definied within initialize() as follows:

var marker1 = new google.maps.Marker({  

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

                map: map,

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

            });

the function called onmouseover is:

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

and the div is:

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

I get the same error: Uncaught ReferenceError: marker1 is not defined

Attempt 2

I tried adding the following line outside the initialize() function

var marker1;

and i get the error: Uncaught ReferenceError: Google is not defined

My javascript is not great, do I make a mistake somewhere?

Answer 1

If you added var marker1; outside the initialize() function, be sure you don’t still have the var on the usage of marker1 inside the initialize() function.

By putting var marker1; outside the function you’re giving the variable marker1 a global scope. If you also include var inside the initialize() function it will create a different local variable (scoped to the function) and the usage inside the div’s onmouseover handler won’t be pointing to what you expect.

Also, the Google error is probably that you’ve capitalized it. In your init function google is lowercase.