CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3
Arvie
Arvie

Reputation: 147

Google map multiple markers on same location projection on mouseover

I have a google map with multiple markers overlapped on same location.

So i used OverlappingMarkerSpiderfier available in this link https://github.com/jawj/OverlappingMarkerSpiderfier to display multiple markers on same location on click event.

I want to show multiple markers on mouseover event instead of onclick event.

function initialize()
    {
        var lats22 = document.getElementById('lats1').value;
        var lngs22 = document.getElementById('lngs1').value;
        // define map center
        //alert(lats2);
        //var latlng = new google.maps.LatLng(70.44694705960048,-101.953125);
        var latlng = new google.maps.LatLng(lats22,lngs22);

        // define map options
        var myOptions = 
        {
            zoom:9,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.MAP,
            scaleControl: true,
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL
            },
            mapTypeControl: false,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            }
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        oms = new OverlappingMarkerSpiderfier(map);

// I have edited click event on oms.addlistener to mouseover as below
        oms.addListener(map, 'mouseover', function(event) {
            findAddress(event.latLng);
            });
    }

Here is the jsfiddle link of my edited google map . Click on marker V in map to see the difference. I want to change this click event to mouseovaer event.

http://jsfiddle.net/5VFeJ/1/

Upvotes: 1

Views: 880

Answers (1)

Arun CH
Arun CH

Reputation: 101

Edit Your oms js file in this link

http://247nywebdesign.com/Testing/FitTipper/php/js/oms.min.js

// edit line43 on jsfiddle as below
        oms.addListener(map, 'click', function(event) {
            findAddress(event.latLng);
            });

Change its "click" event to "mouseover"

http://jsfiddle.net/5VFeJ/1/

Upvotes: 1

Related Questions