Recover Marker within multiple maps

Asked

Viewed 42 times

1

I have an app that uses a Google map and shows multiple markers. Next to the map I list the addresses and I would like to, when the user gave a mouseover for each address, the map icon changes.

So I have (to show the markers):

for (var i = 0; i < lat.length-1; i++) {
    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat[i], long[i]),id:i, title: nomes[i], icon: pinImage, label: {text: ""+(i+1)+"", color: "white"} ,
        map: map
    });

And I have (to capture the mouseover on the link):

$("a[data-link]").mouseover(function() {

    var idNumber = $(this).data("link");
    var novocentro = new google.maps.LatLng(lat[idNumber-1], long[idNumber-1]);
    map.setZoom(14);
    map.setCenter(novocentro);
});

I can already center the map to the location and zoom in. But I can’t change the Marker ICON. Imagine I could do something like this:

marker[idNumber].setIcon = "xxxx"

But it doesn’t work.

javascript

1 answer

1


Hello,

You almost got it right, only setIcon is a function, that should be called so:

marker[idNumber].setIcon('nomedoicone');

You can also pass an object of type Icon or Symbol.

See more in: Google Maps Javascript API - #Marker.setIcon

  • Thanks for the help! But there’s still something missing. I’m wondering, minute ....

  • If I put just below map.setCenter(newcontrol); this: Marker[Idnumber]. setIcon('namepaint'); (just to see the result), the console returns an error like this: Uncaught Typeerror: Cannot read Property 'setIcon' of Undefined This snippet is inside the INITMAP function, to be included. The same problem happens if I call for example var val = Marker[1]. get("title"); It seems not to recognize MARKER. But it recognizes "map", pq map.setCenter(newcontrol) works.

  • Your variable marker does not exist in the context of the function. When creating markers, you must assign in an Array each, so, arrayMarkers[idNumber].setIcon('nomedoicone');. For the function setIcon belongs to a Marker only.

  • It worked!! I created an array, I played every single Marketer inside and then I just did this: markers[Idnumber-1]. setIcon(pinImagehover); Thank you very much for your help!!

  • Good! Please mark the answer as valid. See more!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.