web-dev-qa-db-fra.com

Google Maps API v3 - Obtenir la carte par adresse?

je suis nouveau sur google maps, et j’aimerais l’intégrer à mon site Web (type de site de pages jaunes).

j'ai actuellement le code suivant:

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

Ce code fonctionne, et me montre la carte pour le Lat/Long spécifique

mais, je veux pouvoir spécifier une adresse et non des paramètres lat/long, puisque j'ai les adresses des sociétés dans l'annuaire, mais pas les valeurs lat/long.

j'ai essayé de chercher cela, mais je n'ai trouvé que quelque chose de similaire sur la version V2, qui était obsolète.

google-maps-api-3street-address
20
Dementic

Vous pouvez utiliser le géocodeur de Google: http://code.google.com/apis/maps/documentation/geocoding/ Attention, vous pouvez ne pas avoir de quota et la demande adressée au géocodeur échouera.

L'utilisation de l'API Google Geocoding est soumise à une limite de 2 500 requêtes de géolocalisation par jour.

12
JohnJohnGa

Ce que vous recherchez, c'est la fonctionnalité de géocodage dans le service Google; Indiquez d’abord une adresse pour obtenir un LatLng, puis appelez setCenter pour effectuer un panoramique de la carte vers un emplacement spécifique. L'API de Google l'a très bien emballé et vous pouvez voir comment cela fonctionne à travers cet exemple :

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

Si vous êtes d'accord avec un iframe, vous pouvez éviter les problèmes de géocodage et utiliser l'API Google Maps Embed :

L’API intégrée de Google Maps est libre d’utilisation (sans quotas ni requête Limites), mais vous devez vous inscrire pour obtenir une clé d’API gratuite pour intégrer une carte. sur votre site.

Par exemple, vous intégriez ceci dans votre page (en remplaçant l'Ellipsis par votre propre clé API Google personnelle):

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

Évidemment, l'utilité de cela dépendra de votre cas d'utilisation, mais j'aime bien cela comme une solution rapide et sale.

8
User

Il existe un plugin pour jQuery qui le rend, son nom est gMap3, et vous pouvez le voir en action ici:

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

et ici

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

1
jlledom

en réalité, gmap3 ne le fait pas pour vous, comme le suggère une autre réponse: il vous donne simplement une API permettant de supprimer de manière abstraite la partie géocodage du processus.

La réponse est: Google ne vous permet plus de le faire. Du moins pas en V3, et comme cela fait plus d'un an que ça existe ...

Vous pourriez réellement envoyer des adresses pour les itinéraires routiers, mais leur API a rendu illégale l’envoi d’une adresse pour une carte normale (intégrée, basée sur une API). Le quota quotidien sur le géocodage est leur jeu pour "toujours autoriser" les adresses tout en les interdisant complètement pour tout site Web réel.

Vous pouvez créer un lien vers une carte avec une adresse, bien que je ne la trouve pas non plus dans la documentation de Google:

http://maps.google.com/maps?f=d&saddr=&daddr=this est mon adresse, ma ville

Cela me pose peut-être un problème, car ils ne fournissent aucune documentation claire et facile. Je dois me rendre sur StackOverflow pour obtenir les réponses que je cherche. C'est à dire. ils mentionnent vaguement que vous avez besoin d'une clé API pour contourner les limites anonymes, mais ne vous liez pas à la nature de ces limites ni à l'utilisation de leur API sans clé. C’est ce que je veux faire pour skunkworks ou le développement de preuves de concept. Au lieu de cela, Google veut publier ses cartes pour les entreprises, etc., au lieu de fournir des informations réelles.

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