CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
pancakecoder
pancakecoder

Reputation: 141

Clicking on a marker closes info windows on other maps that are on the same page?

I'm working on a WordPress plugin where I need to enable the option for users to add multiple maps to the same page. This by itself works fine, but there is one issue that I'm not sure how to fix ( if it's even possible ).

What happens is that there are three maps with each map having a marker in a different location. If you click on the marker the info window opens which also work fine for each of the maps.

But I noticed if you for example click on the marker on the map on the top, and leave the info window open. And then click on the marker on the map in the middle, the info window for the first map closes. Which is not really what I want, since the user didn't click on anything in the top map.

The user clicked on a marker in a different map, so I would prefer to not close the other info window on the other maps. If there was a single map with lots of markers, then this would be normal behavior.

You can see the example here http://jsfiddle.net/76doay4o/

var map, infoWindow;

if ( $( ".gmap-canvas" ).length ) {
    $( ".gmap-canvas" ).each( function( i ) {
        var mapId = $( this ).attr( "id" );

        initializeGmap( mapId, i );
    });
}

function initializeGmap( mapId, i ) {
    infoWindow = new google.maps.InfoWindow();

    var markers = [
        ["-0.803689,11.609444", "map 1"],
        ["7.369721,12.354722", "map 2"],
        ["-4.267778,15.291944", "map 3"]
    ];

    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng( 0,0 ),
        mapTypeId: "terrain",
        mapTypeControl: false,
        panControl: false,
        scrollwheel: true,
        streetViewControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.RIGHT_TOP
        }
    };

    map = new google.maps.Map( document.getElementById( mapId ), mapOptions );

    addMarker( markers[i] );
}

function addMarker( latLng  ) {
    var latLngTmp    = latLng.toString().split( "," );
    var markerLatlng = new google.maps.LatLng( latLngTmp[0], latLngTmp[1] );
    var marker       = new google.maps.Marker({
        position: markerLatlng,
        map: map,
        draggable: false
    }); 

    map.setCenter( markerLatlng );

    google.maps.event.addListener( marker, "click", ( function( m ) {
        return function() {
            console.log( "marker click" );

            setInfoWindowContent( marker, latLng[1], m );
        };
    }( map ) ) );
}

function setInfoWindowContent( marker, InfoWindowContent, m ) { 
    infoWindow.setContent( InfoWindowContent );
    infoWindow.open( m, marker );
}

Any idea's or suggestion how to fix this? So that if you click on a marker and open the info window, it won't close info windows on other maps that are on the same page?

Upvotes: 0

Views: 168

Answers (1)

Shaunak
Shaunak

Reputation: 18028

Okay here's the fixed version: http://jsfiddle.net/76doay4o/1/

Your problem is, you defined the infowindow as a global variable (for rest of the functions), and were using that instance directly in the functions. I just moved it inside the constructor and passed it to addMarker and setInfoWindowContent as needed.

Upvotes: 3

Related Questions