Подтвердить что ты не робот

API Карт Google 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 params, поскольку у меня есть адреса компаний в телефонной книге, но у меня нет значений lat/long.

Я попытался найти это, но я нашел только что-то подобное в версии V2, которая устарела.

4b9b3361

Ответ 1

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

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

Ответ 2

То, что вы ищете, - это функция Geocode в сервисе 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);

Ответ 3

Если у вас все в порядке с iframe, вы можете пропустить проблему с геокодированием и использовать API для встраивания Google Maps:

API Google Maps Embed можно использовать бесплатно (без квот или запроса пределы), однако вы должны зарегистрироваться для бесплатного ключа API для встраивания карты на вашем сайте.

Например, вы бы вставляли это на свою страницу (заменяя многоточие на свой личный ключ API Google):

<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> 

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

Ответ 5

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

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

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

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

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

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

Ответ 6

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>