Google Maps API v3 - Получить карту по адресу? - PullRequest
Новая
       30

Google Maps API v3 - Получить карту по адресу?

21 голосов
/ 30 июля 2011

Я новичок в 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 ]

12 голосов
/ 30 июля 2011

То, что вы ищете, это функция геокодирования в сервисе 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);
12 голосов
/ 30 июля 2011

Вы можете использовать геокодер Google: http://code.google.com/apis/maps/documentation/geocoding/ Будьте осторожны - у вас может быть недостаточно квоты, поэтому запрос к геокодеру будет неудачным

Использование API геокодирования Google ограничено 2500 запросами геолокации в день.

8 голосов
/ 16 августа 2014

Если у вас все в порядке с 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>

Очевидно, что полезность этого будет зависеть от вашего варианта использования, но мне нравится это как быстрое и грязное решение.

1 голос
/ 12 июля 2012

gmap3 на самом деле не делает это для вас, как предлагает другой ответ: он просто дает вам API для абстрагирования части процесса геокодирования.

Ответ таков: Google не делаетна самом деле позволяют вам делать это больше.По крайней мере, не в V3, и так как он существует уже больше года ...

Вы могли бы на самом деле отправлять адреса для направлений движения, но их API сделал незаконным отправкуадрес для нормальной (встроенной, на основе API) карты любого вида.Ежедневная квота на геокодирование - это их игра в «все еще разрешающие» адреса, в то время как в действительности они полностью запрещены для любого реального веб-сайта.

Вы можете связать карту с адресом, хотя я не могу найти это и в документах Google.:

http://maps.google.com/maps?f=d&saddr=&daddr=this - мой адрес, штат

Может быть, у меня просто проблема с этим, потому что они не предоставляют четкой, простой документации - я должен прийти кStackOverflow, чтобы получить ответы, которые я ищу.То есть.они смутно упоминают, что вам нужен ключ API, чтобы обойти анонимные ограничения, но не ссылаются ни на то, что эти ограничения, ни на то, как использовать их API без ключа.Это то, что я хочу сделать для скунсов или разработки концепции.Вместо этого Google хочет выдвигать свои Карты для предприятий и т. Д. Вместо предоставления актуальной информации.

1 голос
/ 30 июля 2011

Существует плагин для jQuery, который делает его, он называется gMap3, и вы можете увидеть его в действии здесь:

http://gmap3.net/examples/address-lookup.html

и здесь

http://jsfiddle.net/gzF6w/1/

0 голосов
/ 04 августа 2014 
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>
...