webentwicklung-frage-antwort-db.com.de

Google Maps API v3 - Karte nach Adresse abrufen?

ich bin neu bei Google Maps.... und ich möchte es in meine Website integrieren (Art der Gelben Seiten).

ich habe derzeit den folgenden Code:

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

Dieser Code funktioniert und zeigt mir die Karte für den spezifischen Lat/Long

aber ich möchte in der Lage sein, eine Adresse und keine Lat/Long-Parameter anzugeben. Da ich zwar die Adressen der Unternehmen im Telefonbuch habe, die Lat/Long-Werte jedoch nicht.

ich habe versucht, danach zu suchen, aber ich habe nur etwas Ähnliches in der Version V2 gefunden, die veraltet war.

20
Dementic

Sie können den Google-Geocoder verwenden: http://code.google.com/apis/maps/documentation/geocoding/ Seien Sie vorsichtig - Sie haben kein Kontingent und die Anfrage an den Geocoder schlägt fehl

Die Verwendung der Google Geocoding API unterliegt einem Abfragelimit von 2.500 Geolocation-Anfragen pro Tag.

12
JohnJohnGa

Was Sie suchen, ist die Geocode-Funktion im Google-Service. Geben Sie zuerst eine Adresse an, um eine LatLng zu erhalten, und rufen Sie dann setCenter auf, um die Karte an den bestimmten Ort zu verschieben. Die API von Google hat es sehr gut verpackt und Sie können sehen, wie es funktioniert dieses Beispiel :

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
Howard

Wenn Sie mit einem iframe einverstanden sind, können Sie den Geokodierungsaufwand überspringen und die Google Maps Embed API verwenden:

Die Google Maps Embed API kann kostenlos verwendet werden (ohne Quoten oder Anforderungslimits ). Sie müssen sich jedoch für einen kostenlosen API-Schlüssel registrieren, um eine Map einbetten zu können auf deiner Seite.

Sie würden dies beispielsweise in Ihre Seite einbetten (indem Sie die Ellipsis durch Ihren eigenen persönlichen Google-API-Schlüssel ersetzen):

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

Natürlich hängt die Nützlichkeit davon von Ihrem Anwendungsfall ab, aber ich mag dies als schnelle und schmutzige Lösung.

8
User

Es gibt ein Plugin für jQuery, das es macht, der Name ist gMap3, und Sie können es hier in Aktion sehen:

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

und hier

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

1
jlledom

gmap3 erledigt dies nicht wirklich für Sie, wie von einer anderen Antwort vorgeschlagen: Es gibt Ihnen nur eine API, um den Geocoding-Teil des Prozesses zu abstrahieren.

Die Antwort lautet: Google lässt Sie das eigentlich nicht mehr zu. Zumindest nicht in V3, und da gibt es seit über einem Jahr ...

Sie könnten tatsächlich Adressen für Wegbeschreibungen senden, aber ihre API hat es illegal gemacht, eine Adresse für eine normale (eingebettete, API-basierte) Karte jeglicher Art zu senden. Das tägliche Kontingent für Geokodierung besteht darin, Adressen immer noch zuzulassen, während sie in Wirklichkeit für jede echte Website völlig unzulässig ist.

Sie können eine Verknüpfung zu einer Karte mit einer Adresse herstellen, obwohl ich dies auch nicht in den Google-Dokumenten finden kann:

http://maps.google.com/maps?f=d&saddr=&daddr=this ist meine Adresse, Stadtstaat

Vielleicht habe ich nur ein Problem damit, weil sie keine klare und einfache Dokumentation bieten - ich muss zu StackOverflow kommen, um die gewünschten Antworten zu erhalten. Ie. Sie erwähnen vage, dass Sie einen API-Schlüssel benötigen, um die anonymen Grenzwerte zu umgehen, aber Sie verknüpfen sich nicht mit diesen Grenzwerten oder wie Sie ihre API ohne Schlüssel verwenden können. Was ich für Skunkworks oder Proof-of-Concept-Entwicklung tun möchte. Stattdessen möchte Google seine Maps für Unternehmen usw. pushen, anstatt tatsächliche Informationen bereitzustellen.

1
Liam
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>
0
Indrajeet Singh