Как к селекту привязать координаты с google-карты?

[alex_stepanow]

Есть такая вещь, на странице снизу есть google-карта, выше нее - селект с названиями горов, как сделать так чтобы выборе города из селекта на карте переходило на его координаты? как можно к option привязать координаты?

[caprella]

Вешать на селект обработчик события http://api.jquery.com/change/, а в обработчике связывать выбранный option с координатами и перерисовывать карту при помощи гугловских API

[alex_stepanow]

Все довольно просто, подключаем стрипт

<script type='text/javascript' src='http://maps.google.com/maps/api/js?v=3&sensor=false'></script>

Далее вот такой скрипт:

<script type='text/javascript'>

var geocoder;

var map;

var infowindow = new google.maps.InfoWindow();

var marker;

function initialize() {

geocoder = new google.maps.Geocoder();

var latlng = new google.maps.LatLng(50.450070, 30.523268);

var mapOptions = {

zoom: 16,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP,

}

map = new google.maps.Map(document.getElementById('map'), mapOptions);

}

function codeLatLng() {

var input = document.getElementById('latlng').value;

var latlngStr = input.split(',', 2);

var lat = parseFloat(latlngStr[0]);

var lng = parseFloat(latlngStr[1]);

var latlng = new google.maps.LatLng(lat, lng);

geocoder.geocode({'latLng': latlng}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

if (results[1]) {

map.setZoom(14);

marker = new google.maps.Marker({

position: latlng,

map: map

});

infowindow.setContent(results[1].formatted_address);

infowindow.open(map, marker);

} else {

alert('No results found');

}

} else {

alert('Geocoder failed due to: ' + status);

}

});

}

</script>

к body добавляем onload="initialize()", вот сам список:

<select id="latlng" onclick="codeLatLng()">

<option value="50.450070, 30.523268">Киев</option>

<option value="49.840363, 24.029796">Львов</option>

<option value="46.48486, 30.732694">Одесса</option>

<option value="50.013917, 36.231308">Харьков</option>

<option value="48.021161, 37.803726">Донецк</option>

</select>

и не забываем <div id='map'></div>.

Все готово

[caprella]

а если я кликну на select, но не изменю значение, координаты будут пересчитываться?

[alex_stepanow]

не совсем понял твой вопрос...

вот пример работы этого скрипта - http://trelad.com/new/index2.html

Edited January 29, 2013 by alex_stepanow

[alex_stepanow]

а если я кликну на select, но не изменю значение, координаты будут пересчитываться?

не совсем понял твой вопрос...

вот пример работы этого скрипта - http://trelad.com/new/index2.html

[caprella]

не совсем понял твой вопрос...

Это я намекаю на то, что у тебя пересчет координат codeLatLng() идет при каждом клике на select, даже если я не изменила значение. Здесь, как по мне, логичнее поставить onchange http://jsfiddle.net/caKpZ/. Но это так, бухчу по мелочи

[alex_stepanow]

не совсем понял твой вопрос...

Это я намекаю на то, что у тебя пересчет координат codeLatLng() идет при каждом клике на select, даже если я не изменила значение. Здесь, как по мне, логичнее поставить onchange http://jsfiddle.net/caKpZ/. Но это так, бухчу по мелочи

ну тогда да, в таком случае:

$("#latlng").on("change", function(){

var coords = $(this).val().split(",")

map.setCenter(new google.maps.LatLng(coords[0] , coords[1]));

})