I have a table with search results and an array of markers for the results. Every element has an ID, and if a user clicks on a marker, the page scrolls to the search result (I'm just changing window.location.hash).

Is it possible to do it vice-versa? Users click on the search result and the infoWindow for a marker appears.

I have a table with search results and an array of markers for the results. Every element has an ID, and if a user clicks on a marker, the page scrolls to the search result (I'm just changing window.location.hash).

Is it possible to do it vice-versa? Users click on the search result and the infoWindow for a marker appears.

• javascript
• google-maps
• google-maps-api-3

• "if a user clicks on a marker, the page scrolls to the search result " can you help me for this ? – Kanagasabapathy Rajkumar Commented Mar 14, 2014 at 10:37

1 Answer 1

I assume you mean that in the map the marker associated to the search result scrolls into view?

As long as your search result has a click event that contains some unique identifier for the marker you want to appear, sure it will work. A site I'm currently managing has a sidebar of search results where when you click the result it will scroll the marker into view on the map and show the infowindow. The code invoked by the click handler looks something like so (sans some error handling and other uninteresting parts for your question):

function MarkerZoomTo(markerIdentifier) {
    pt = gMarkers[markerIdentifier].getPosition();
    newpt = new google.maps.LatLng(pt.lat() + .02, pt.lng());
    map.panTo(newpt);

    if (infoWindow) {
    infoWindow.close();
    }

    infoWindow.setContent(gMarkers[markerIdentifier].get('iwcontent'));
    infoWindow.setPosition(gMarkers[markerIdentifier].getPosition());

    infoWindow.open(map, gMarkers[markerIdentifier]);
}

I pass the unique marker identifier to the function, get the specific marker out of my marker array, get it's lat/lng position, create a LatLng object, and pan to that location.

The rest is just dressing to retrieve the content for the infowindow and set it's position which you could do any way you see fit.

And finally, just open the infowindow for the marker.

Good luck!