Question

I have a Map with custom style and its working great,
I was wondering if I can somehow control the location of the map using some links in my page,
suppose I have 2 locations, I want to have

<a href="#" id="locaation1">Location1</a>

&

<a href="#" id="locaation2">Location2</a>

Then when I click on Location 1 map goes to that location , and same story for location 2, is it possible with jquery?
It would also be great if I can add a custom marker to each location too.
Thanks.

Answer 1

Yes, you can even do it without jquery, the panto method is what you want to use, https://developers.google.com/maps/documentation/javascript/reference#Map basically, just add a call to a predefined function into your anchor onclick event (or use a click handler in jquery to wire it up).

using jquery, you would need something like:

$("#location1").click(function(){
   var pos = new google.maps.LatLng(-25.363882, 131.044922),
   g_map.panTo(pos);  //reference to globally defined google maps object
});

Here is a simple example from the google api documentation that can easily be retrofitted using the hints I have provided above:

https://google-developers.appspot.com/maps/documentation/javascript/examples/event-simple