Поиск по адресу (геокодинг) Google Maps API V3
Доброго времени суток!
Есть задание: сделать карту с поиском по адресам.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>1111</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var center_map = new google.maps.LatLng(46.459856,30.731506);
var myOptions = {
zoom: 13,
center: center_map,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var geocoder = new google.maps.Geocoder(); // геокодер
}
function codeAddress(){
var address = document.getElementById('adr').value;
geocoder.geocode( { 'address':'Одесса,'+address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({ // маркер
position: results[0].geometry.location,
map: map
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
});
}
</script>
</head>
<body onload="initialize()">
<p>
<input type="text" id="adr" value="Греческая 19" />
<input type="button" value="Geocode" onclick="codeAddress()">
</p>
<div id="map_canvas" style="width: 800px; height: 600px"></div>
</body>
</html>
Проблема в том, что нажатие на кнопку не обрабатывается и считывание из инпута. Проверял алертом, в разных местах, в общем, как только в коде появляется или функция codeAddress() или создание переменной с информацией со страницы - все, создается только карта и больше ничего. Я пробовал убрать считывание строки из инпута и событие онклик, а поиск делая по адресу вписанному в код (стр. 21)
geocoder.geocode( { 'address': 'Одесса,Греческая 19'}, function(results, status)
Так все работает, а вот почему не считывает я не понимаю, помогите, пожалуйста.:help: |
наверное потому что не закрыто условие:
} else {
alert('Geocode was not successful for the following reason: ' + status);
добавь скобку } ниже |
Нет, его я прямо в теме и добавил (и на всякий только что проверил со скобкой, все равно нет...)
|
Спасибо devoteза ответ.
Проблема решилась, переменные во второй функции geocoder и map не доступны, т.к. созданы были в первой функции. |
Очень полезная вещь, вовремя нашел. У себя сделал так:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var geocoder;
var marker;
//https://developers.google.com/maps/documentation/javascript/reference?hl=ru#MarkerOptions
function initialize() {
var center_map = new google.maps.LatLng(46.459856,30.731506);
var myOptions = {
zoom: 13,
//center: center_map,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder(); // геокодер
marker = new google.maps.Marker({ // маркер
visible: false,
map: map
});
}
function codeAddress(){
var address = document.getElementById('adr').value;
geocoder.geocode( { 'address':'Днепропетровск,'+address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
marker.setOptions({
visible: true,
title: address,
position: results[0].geometry.location
});
map.setZoom(17);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>
<p>
<input type="text" id="adr" value="Коцюбинского 2/4" />
<input type="button" value="Geocode" onclick="codeAddress()">
</p>
<div id="map_canvas" style="width: 400px; height: 300px"></div>
|
| Часовой пояс GMT +3, время: 14:07. |