switch locations in google map api 3

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

Answer 2

如果您的地图实例名为“地图”，则可以使用：

<a href="#" onclick="map.setCenter(new google.maps.LatLng(lat, long))" id="location1">Location1</a>