Google Maps API v3 - Получить карту по адресу?
Я новичок в Google Maps, и я хотел бы интегрировать его в свой веб-сайт (вид сайта Желтые страницы).
в настоящее время у меня есть следующий код:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 500px; height: 300px; position: relative; background-color: rgb(229, 227, 223);"></div>
</body>
</html>
Этот код работает, и показывает мне карту для конкретного Lat/Long
но я хочу иметь возможность указывать адрес, а не параметры lat/long, так как у меня есть адреса компаний в телефонной книге, но нет значений lat/long.
Я попытался найти это, но я нашел только что-то подобное в версии V2, которая устарела.
6 ответов
Вы можете использовать геокодер Google: http://code.google.com/apis/maps/documentation/geocoding/ Будьте осторожны - у вас может быть недостаточно квоты, поэтому запрос к геокодеру будет неудачным
Использование API геокодирования Google ограничивается 2500 запросами геолокации в день.
То, что вы ищете, это функция геокодирования в службе Google; сначала дайте адрес, чтобы получить LatLng, затем вызовите setCenter, чтобы переместить карту в определенное местоположение. API Google обернул его очень хорошо, и вы можете увидеть, как он работает, на следующем примере:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').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({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Если у вас все в порядке с iframe, вы можете пропустить хлопот с геокодированием и использовать Google Maps Embed API:
API Google Maps Embed можно использовать бесплатно (без квот и лимитов запросов), однако вы должны зарегистрироваться для получения бесплатного ключа API для встраивания карты на свой сайт.
Например, вы бы вставили это на свою страницу (заменив многоточие своим личным ключом Google API):
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?
q=301+Park+Avenue,+NY,+United+States&key=..."></iframe>
Очевидно, что полезность этого будет зависеть от вашего варианта использования, но мне нравится это как быстрое и грязное решение.
Существует плагин для jQuery, который делает его, его имя gMap3, и вы можете увидеть его в действии здесь:
http://gmap3.net/examples/address-lookup.html
и здесь
Gmap3 на самом деле не делает это для вас, как предлагает другой ответ: он просто дает вам API для абстрагирования части процесса геокодирования.
Ответ: Google на самом деле не позволяет вам делать это больше. По крайней мере, не в V3, и так как это было вокруг более года...
На самом деле вы могли бы отправлять адреса для маршрутов проезда, но их API сделал незаконным отправку адресов для обычной (встроенной, на основе API) карты любого вида. Ежедневная квота на геокодирование - это их игра в "все еще разрешающие" адреса, в то время как в действительности они полностью запрещены для любого реального веб-сайта.
Вы можете связать карту с адресом, хотя я не могу найти это и в документации Google:
http://maps.google.com/maps?f=d&saddr=&daddr=this это мой адрес, город-штат
Может быть, у меня просто проблема с этим, потому что они не предоставляют четкой и простой документации - я должен прийти в Stackru, чтобы получить ответы, которые я ищу. То есть. они смутно упоминают, что вам нужен ключ API, чтобы обойти анонимные ограничения, но не указывают ни на то, что эти ограничения, ни на то, как использовать их API без ключа. Это то, что я хочу сделать для скунсворка или разработки концепции. Вместо этого Google хочет выдвигать свои Карты для предприятий и т. Д. Вместо предоставления актуальной информации.
Try this code:
<?php
$arrMap = array();
$address = (isset($_POST['address'])) ? $_POST['address'] : "";
$lat = (isset($_POST['lat'])) ? $_POST['lat'] : "";
$lng = (isset($_POST['lng'])) ? $_POST['lng'] : "";
function getlatlong($address)
{
$url = 'http://maps.googleapis.com/maps/api/geocode/json?address=' . urlencode($address) . '&sensor=true';
$json = @file_get_contents($url);
$data = json_decode($json);
if ($data->status == "OK")
return $data;
else
return false;
}
function getaddress($lat, $lng)
{
$url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' . trim($lat) . ',' . trim($lng) . '&sensor=true';
$json = @file_get_contents($url);
$data = json_decode($json);
if ($data->status == "OK")
return $data->results[0]->formatted_address;
else
return false;
}
if ($lat && $lng) {
$arrMap['address'][] = getaddress($lat, $lng);
$arrMap['lat'][] = $lat;
$arrMap['lng'][] = $lng;
}
if ($address) {
$coordinates = getlatlong($address);
$arrMap['lat'][] = $coordinates->results[0]->geometry->location->lat;
$arrMap['lng'][] = $coordinates->results[0]->geometry->location->lng;
$arrMap['address'][] = $address;
}
//print_r($arrMap);
?>
<!DOCTYPE html>
<html>
<head>
<title>Localizing the Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 90%;
margin: 20px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&language=en"></script>
<script type="text/javascript">
function initialize() {
var map = new google.maps.Map(document.getElementById("map-canvas"), {
center: new google.maps.LatLng(28.635308, 77.22496),
zoom: 4,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
<?php for ($i = 0; $i < count($arrMap['lat']); $i++) { ?>
var lat = '<?php echo $arrMap['lat'][$i] ?>';
var lng = '<?php echo $arrMap['lng'][$i] ?>';
var address = '<?php echo $arrMap['address'][$i] ?>';
var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));
var marker = new google.maps.Marker({
map: map,
position: point
});
var html = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading"> </h1>'+
'<div id="bodyContent">'+
'<p><b>Latitude: </b>'+lat+
'<br><b>Longitude: </b>'+lng+
'<br><b>Address: </b>'+address+
'</p>'+
'</div>'+
'</div>';
bindInfoWindow(marker, map, infoWindow, html);
<?php } ?>
google.maps.event.addListener(map,'click',function(event) {
// alert(event.latLng.lat() + ', ' + event.latLng.lng());
var clickLat = event.latLng.lat().toFixed(8);;
var clickLng = event.latLng.lng().toFixed(8);;
document.getElementById("lat").value=clickLat;
document.getElementById("lng").value=clickLng;
marker.setPosition(event.latLng);
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<form action="" name="searchForm" id="searchForm" method="post">
<div class="click-latlong">
<label>Latitude: </label>
<input type="text" name="lat" id="lat" value="">
<label>Longitude: </label>
<input type="text" name="lng" id="lng" value="">
<input type="submit" name="sbmtLatlong" id="updateLatlong" value="Submit"/>
</div>
<div class="click-latlong">
<label>Address: </label><input type="text" name="address" id="address" value="" />
<input type="submit" name="sbmtAddress" id="sbmtFrm" value="Search" />
</div>
</form>
<div id="map-canvas"></div>
</body>
</html>