Question

I have a website pune.org that uses places API. As you can see however if I select markers the Listings by lines just keep getting added and eventually make the entire map area useless.

How can I reset the Listings by or ideally to just show Listings by of the marker that is currently selected?

Thanks,
Sandeep

Answer 1

You’re instantiating the Places Service several times in your code, every time the map pans for example. You need to set a global variable named service at the beginning, then instantiate the Places Service once (*during your map initialization would be appropriate). Then you can simply call the service.search method in your other functions, rather than instantiating the service over and over.

So:

var service;
\\Rest of other global variables
function initializeMap(initialLat, initialLng, detectCurrentLocation, radius,
        zoomLevel, defaultType) {
    initialLocation = new google.maps.LatLng(initialLat, initialLng);
    geocoder = new google.maps.Geocoder();

    var myOptions = {
        zoom : zoomLevel,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    service = new google.maps.places.PlacesService(map); //Only do this once!
    ...//rest of your code
}

Then remove the other instances of service = new google.maps.places.PlacesService(map); in your code and only call service.search(request, callback);