Изменить значок маркера карты Google, когда onmouseover div (Google maps v3 api)

Question

Как изменить значок маркера на картах Google, когда наведу курсор мыши на текст в элементе div? Мне удалось изменить значок маркера на мыши над маркером на самой карте, используя

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

EDIT:

Вот что у меня сейчас:

function initialize(){
....
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"

        }); 
....
}


function changeMarker(marker) {

            alert(marker);

    }

и

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

Я использую Chrome. В консоли при подключении к div я получаю сообщение об ошибке «Uncaught ReferenceError: marker1 не определено» *

Answer 1

Добавьте свойство onmouseover в div. Допустим, он назывался changeMarker.

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);
}

Ваш div может выглядеть так:

<div onmouseover="changeMarker(marker1)">

Я бы порекомендовал, однако, кэшировать MarkerImage (так как оно выглядит довольно статичным), чтобы Google не нужно было повторно генерировать изображение графика.

Вы можете установить другие свойства изображения. См. документацию

Answer 2

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

сначала вызовите функцию инициализации, определите маркер1, а затем используйте этот код. Вы также можете вызывать эту функцию различными способами, как при наведении мыши на div и т. Д.

Answer 3

Я использую Chrome. В консоли onmouseover the <div> я получаю ошибку:

Uncaught ReferenceError: маркер1 не определен

Если вы установите переменную следующим образом:

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

alert(marker1);

marker1 недоступен на уровне «окна». Вы должны написать это так:

var marker1;

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

alert(marker1);