CODEWITHSUNDEEP
jquerygoogle-mapsgoogle-maps-markersmouseout
Sebsemillia
Sebsemillia

Reputation: 9476

Google Maps API Javascript hover effect on marker mouseout

I have an array of coordinates for the google map. Each coordinates set gets its own individual marker. If the user hovers (mouseover) the marker, it gets exchanged by another icon (this Icon is the same for all markers). My problem is, that if the user makes a mouseout I want to restore the original icon, but I just get the last created marker (marker3.png) for all markers then.

Maybe you have an idea. Here is the script:

$(document).ready(function(){
                            var locations = [
                            ['Dr. Christian Schrey', 52.499496, 13.316873, 4],
                            ['Dr. Teufel', 52.528664, 13.380232, 5],
                            ['Dr. Sebs Firma', 52.507839, 13.496490, 3],

                            ];

                            initialize();
                            var map;
                            function initialize() {
                            var myLatlng = new google.maps.LatLng(52.52427, 13.40629);
                            var myOptions = {
                                zoom: 11,
                                center: myLatlng,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            }
                            map = new google.maps.Map(document.getElementById("Map"), myOptions);

                            var infowindow = new google.maps.InfoWindow();

                            var marker, i;
                            var y = 0;

                            for (i = 0; i < locations.length; i++) {  
                            y++;
                            image = 'http://xxx.de/test6/system/css/images/marker'+y+'.png';

                            marker = new google.maps.Marker({
                                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                map: map,
                                icon: image
                            });

                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                return function() {
                                infowindow.setContent(locations[i][0]);
                                infowindow.open(map, marker);
                                }
                            })(marker, i));

                            google.maps.event.addListener(marker, "mouseover", function(event) {
                            this.setIcon("http://xxx.de/test6/system/css/images/pfote_clean.png");
                            });

                            google.maps.event.addListener(marker, "mouseout", function(event) {
                            this.setIcon(image);
                            });

                            }

                        };
                    });

I appreciate any help! Thank you.

Upvotes: 1

Views: 4495

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117314

You may store the url inside the marker-options:

marker = new google.maps.Marker({
     position: new google.maps.LatLng(locations[i][1], locations[i][2]),
     map: map,
     icon: image,
     src:image//<-
});

then you'll be able to retrieve the url later in the callback:

this.setIcon(this.src);

Upvotes: 2

Related Questions