CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
hubert
hubert

Reputation: 933

Sidebar on Google Maps reacting to map

I have a Google Map (API v3) populated with markers that indicate data from a database. I would like to add a sidebar that checks which markers are currently visible on the map and adds them to a sidebar, adjusting whenever map is moved. Is something like that possible?

Upvotes: 0

Views: 884

Answers (1)

Tony Miller
Tony Miller

Reputation: 9159

I have a GitHub project which loads a KML file containing placemarks, puts them in the sidebar, and uses the Google Maps API to dim / brighten the locations when changing the map. The relevant portion is this snippet:

google.maps.event.addListener(mapInstance, 'bounds_changed', function() {
    currentBounds = mapInstance.getBounds();
    for (i = 0; i < parser.docs[0].placemarks.length; i++) {
        var myLi = $("#p" + i);
        if (currentBounds.contains(parser.docs[0].placemarks[i].marker.getPosition())) {
            myLi.css("color","#000000");
        } else {
            myLi.css("color","#CCCCCC");
        }
    }
});

The abbreviated version of that is:

google.maps.event.addListener(mapInstance, 'bounds_changed', function() {
    currentBounds = mapInstance.getBounds();
    /*
     Loop over Google map placemarks and check the placemark by doing:
     if (currentBounds.contains(currentPlacemark.getPosition())) {
       // Change CSS to make sidebar entry visible
     } else {
       // Change CSS to make sidebar entry invisible
     }
     */
});

In my examples, mapInstance is an instance of google.maps.Map, and currentPlacemark is an instance of one of your google.maps.Marker objects.

Upvotes: 1

Related Questions