Google Maps API: pan to markers from a list.
Solution 1
If you convert the cities
array to an object like:
var cities = {
'Groningen': [ 53.216723950863425, 6.560211181640625, 4],
'San Francisco': [ 34.01131647557699, -118.25599389648437, 5],
'New York City': [ 40.7143528, -74.0059731, 3]
};
And add a data-
attribute with matching city name along with a common class name to each of the links:
/* not sure what html looks like , using pseudo "tagName"*/
<tagName class="map_link" data-city="Groningen">Groningen</tagName>
You can create one handler for the whole class:
$("#contacts").on("click", ".map_link", function() {
/* "this" within handler is the actual element clciked*/
/* find correct array from "cities" object */
var data=cities[ $(this).data('city') ]; /* returns array[ 53.21, 6.56, 4]*/
var laLatLng = new google.maps.LatLng( data[0], data[1]);
map.panTo(laLatLng);
map.setZoom( data[2]);
});
Solution 2
Here's how I'd do it, simply using the reverse geocoding capabilities of Google Maps to lookup the city names:
<ul id="cities">
<li>San Fransisco</li>
<li>Groningen</li>
<li>New York City</li>
<li>Los Angeles</li>
</ul>
JS
$('#cities li').on('click', function() {
$.ajax({
url: 'http://maps.googleapis.com/maps/api/geocode/json?address='+decodeURIComponent( $(this).text() )+'&sensor=false',
type: 'GET'
}).done(function(data) {
var laLatLng = new google.maps.LatLng(data.results[0].geometry.location.lat, data.results[0].geometry.location.lng);
map.panTo(laLatLng);
map.setZoom(5);
});
});
Robin Papa
Updated on June 26, 2022Comments
-
Robin Papa about 2 years
Hello :) Please bear with me, I'm not a coder but I'm trying to learn by doing. This is the page I'm working on currently; http://www.websu.it/devnw/dev/contact.html. I've currently set up a map using the Google Maps API, using the following javascript:
function initialize() { var mapOptions = { zoom: 5, center: new google.maps.LatLng(48.160, -6.832), disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); setMarkers(map, cities); } var cities = [ ['Groningen', 53.216723950863425, 6.560211181640625, 4], ['San Francisco', 34.01131647557699, -118.25599389648437, 5], ['New York City', 40.7143528, -74.0059731, 3], ['Amsterdam', 52.3702157, 4.8951679, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; function setMarkers(map, locations) { for (var i = 0; i < locations.length; i++) { var city = locations[i]; var myLatLng = new google.maps.LatLng(city[1], city[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: city[0], zIndex: city[3] }); } } This continues below...
And then I created a list where every li element, when clicked upon, results in a panning of the map to one of these markers.
I've added the following code and it works very well. But it means that I have to add the longitudes/latitudes for every city in the above code array of "cities", as well as in the code below for the var laLatLng. How can I get the lat's and lon's more easily in the panning script below?
$(document).ready(function() { initialize(); $("#contacts").on("click", "#sanfransisco", function() { var laLatLng = new google.maps.LatLng(34.01131647557699, -118.25599389648437); map.panTo(laLatLng); map.setZoom(5); }); $("#contacts").on("click", "#groningen", function() { var laLatLng = new google.maps.LatLng(53.216723950863425, 6.560211181640625); map.panTo(laLatLng); map.setZoom(6); }); $("#contacts").on("click", "#nyc", function() { var laLatLng = new google.maps.LatLng(40.7143528, -74.0059731); map.panTo(laLatLng); map.setZoom(6); }); $("#contacts").on("click", "#losangeles", function() { var laLatLng = new google.maps.LatLng(52.3702157, 4.8951679); map.panTo(laLatLng); map.setZoom(6); }); });
I hope someone can explain to me how to get the variables from cities into clickable list javascript. Thanks a lot, I deeply appreciate your response!
-
Robin Papa over 11 yearsYou are awesome! Going to try it. Thanks so much! Will come back here afterwards :)
-
charlietfl over 11 yearsI thought of this but assumed OP may have specific lat/long within each city to focus on like a local office and also zoom is different for each city on OP array
-
Robin Papa over 11 yearsThank you adeneo for your help! I tried both your solution and the one of charlieftl, but as charlieftl stated, I needed to get the zoom-variable too. So I'll go with that one :) Thanks!
-
Robin Papa over 11 yearsThis was indeed the best solution, thank you! Would you perhaps also know how to add a marker for each of these cities? I'm trying and can't get it to work, but perhaps I'll ask a new question on this site.
-
Robin Papa over 11 yearsThat one's here now: stackoverflow.com/questions/14308884/… Thanks again for your help!