Google map ссылка на метку
Кто нибудь знает, возможно ли указать ссылку на метку на карте гугл.
Допустим на карте 3 метки над картой находятся 3 ссылки на метки при клике на которые карта центрируется на данной метке... Не могу найти.... Пример ![]() Вот пример карты http://learn.javascript.ru/play/yve8ub |
вешай обработчики на каждую ссылку и вызывай апи методы карты - центрирование на метке, пример
var centerpoint = new google.maps.LatLng(coords.lat, coords.lng); map.setCenter(centerpoint); |
Google map центрирование
psfdek,
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Region code biasing (US)</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } div ~ a{ display: inline-block; cursor: pointer; margin: 0 15px; background: #FFCC99 ; padding: 4px 8px; } div ~ a:hover{ background: #CCCCCC } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script> var geocoder; var map; var query = new Array( 'Челябинск, ул. Кирова, д. 149', 'Челябинск, ул. Кирова, д. 86', 'Челябинск, ул. Кирова, д. 112'); function initialize() { geocoder = new google.maps.Geocoder(); var mapOptions = { zoom: 15 } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); codeAddress(); } function codeAddress() { var count=0; for (var i = 0; i < query.length; i++) { var address = query[count]; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var a = document.createElement('a'); a.appendChild(document.createTextNode(results[0].address_components[1].short_name+', '+results[0].address_components[0].short_name)); a.onclick = function() { map.setZoom(17); map.setCenter(results[0].geometry.location); } document.body.appendChild(a); map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert('Geocode was not successful for the following reason: ' + status); } }); count++; } } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas" style="width: 600px; height: 400px"></div> </body> </html> |
Благодарю Вас: nice_try и рони.
Рони в Вашем примере теги а создаются в цикле, а как обратиться извне цикла. Т.е ссылка уже была создана (не в цикле). |
psfdek,
вместо создания ссылки найдите ссылку с нужным текстом или иным идентификатором - строки 45-46, строка 52 соотвественно ненужна |
|
psfdek,
потому что http://javascript.ru/basic/closure#p...-ispolzovaniya |
:blink: не понял. Там то они все получают одно и тоже, а у меня только последний получает.
|
psfdek,
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Region code biasing (US)</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } div ~ a{ display: inline-block; cursor: pointer; margin: 0 15px; background: #FFCC99 ; padding: 4px 8px; } div ~ a:hover{ background: #CCCCCC } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script> var geocoder; var map; var query = new Array('Челябинск, ул. Кирова, д. 149', 'Челябинск, ул. Кирова, д. 86', 'Челябинск, ул. Кирова, д. 112'); var idArr = new Array('mp0','mp1','mp2'); function initialize() { geocoder = new google.maps.Geocoder(); var mapOptions = { zoom: 15 } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); codeAddress(); } function codeAddress() { for (var i = 0; i < query.length; i++) { var address = query[i]; geocoder.geocode({ 'address': address }, function(k) { return function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var a = document.getElementById(idArr[k]); a.onclick = function() { map.setZoom(17); map.setCenter(results[0].geometry.location); } map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert('Geocode was not successful for the following reason: ' + status); } } }(i) ); } } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas" style="width: 600px; height: 400px"></div> <a href="#" id="mp0">ссылка 1</a> <a href="#" id="mp1">ссылка 2</a> <a href="#" id="mp2">ссылка 3</a> </body> </html> |
Цитата:
|
Часовой пояс GMT +3, время: 17:31. |