web-dev-qa-db-fra.com

Ajouter le contour de la "zone de recherche" au résultat de Google Maps

L'année dernière, Google a ajouté à ses offres des profils de zones de recherche, comme indiqué dans de nombreux endroits, et visibles sur Google Maps. Par exemple ici , et rapporté ici et ici .

Pour être explicite, c'est lorsque Google ajoute un aperçu relatif à la requête de recherche. Si vous recherchez une ville, un code postal ou un code postal, Google mettra en surbrillance cette région de la carte. Exemple:

90210 Search on Google Maps

Cela n'était apparemment pas disponible via l'API et uniquement via les propriétés Web de Google.

Récemment, j'ai remarqué que d'autres domaines utilisaient cette fonctionnalité, par exemple sur Twitter .

Existe-t-il une API distincte que Twitter et d'autres grandes organisations utilisent? Cette fonctionnalité a-t-elle été ajoutée, mais n'est pas encore documentée? Ou ai-je simplement manqué l'annonce et je ne trouve aucun document?

google-mapsgoogle-maps-api-3
37
dazbradbury

Les contours que vous voyez là viennent de Twitter, ils doivent les avoir stockés.

Jetez un coup d'œil au fichier json demandé lorsque vous appelez la page Twitter: http://api.Twitter.com/1/geo/id/c3f37afa9efcf94b.json

Je l'ai essayé, geometry.coordinates[0][0] définit un fin polygone (devinez le contour pour Austin).

Lorsque vous l'essayez, notez que l'ordre de la paire est lng,lat et non lat,lng.

Ainsi, la Twitter-geo-API peut être un bon début pour la mise en œuvre des contours. Heureusement, Twitter prend en charge JSONP pour une solution côté client.

Voir un exemple: http://jsfiddle.net/doktormolle/MRYm3/

<edit>

l'API Twitter a été modifiée, l'exemple ne fonctionne plus (l'authentification est requise)

</edit>

17
Dr.Molle

Comme il n’existe pas encore de solution proposée par l’API de Google Maps et que saisir manuellement les coordonnées n’a pas d’importance, voici un petit bijou d’alternative. J'ai trouvé cette réponse sur le site Web de GIS --va une bouée de sauvetage absolue (le jurihandl aurait économisé BEAUCOUP de minutes pour dessiner Calgary, ci-dessus; D): 

Vous pouvez obtenir des coordonnées de polygone dans json pour les utiliser avec googlemaps en utilisant openstreetmap. Allez à http://nominatim.openstreetmap.org/ . Chercher un endroit comme "San Francisco, CA"

Cliquez sur "Détails"

Recherchez l'ID OSM et copiez-le (contrôle + c), exemple: 2018776

Collez l'ID http://polygons.openstreetmap.fr/index.py et téléchargez le fichier le fichier JSON

Source: GIS

24
Govind Rai

J'ai trouvé une très bonne solution pour tracer la frontière de la ville.

Voici un outil plutôt cool, où vous pouvez tracer la frontière de la ville. Vous pouvez être aussi exact que vous le souhaitez: http://www.birdtheme.org/useful/v3tool.html

Sur le côté droit, vous obtenez un aperçu en direct de votre code. Vous pouvez choisir entre KML et javascript. Basculez sur javascript. Puis copiez vos coordonnées.

Voici le site complet où vous pouvez voir la frontière de Bruxelles (Europe).

<!DOCTYPE html>
<html lang="en-US">
 <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>::Maps ::</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyD0X4v7eqMFcWCR-VZAJwEMfb47id9IZao"></script>
    <script type="text/javascript">
        var map;

        //COORDS
        var brussels = [
        new google.maps.LatLng(50.835866,4.258575),
        new google.maps.LatLng(50.818083,4.244499),
        new google.maps.LatLng(50.811358,4.276428),
        new google.maps.LatLng(50.813094,4.302177),
        new google.maps.LatLng(50.773162,4.338226),
        new google.maps.LatLng(50.764259,4.384918),
        new google.maps.LatLng(50.793132,4.482422),
        new google.maps.LatLng(50.810274,4.450836),
        new google.maps.LatLng(50.821120,4.476585),
        new google.maps.LatLng(50.852342,4.462852),
        new google.maps.LatLng(50.866861,4.421310),
        new google.maps.LatLng(50.895021,4.430580),
        new google.maps.LatLng(50.911692,4.413757),
        new google.maps.LatLng(50.912342,4.395561),
        new google.maps.LatLng(50.898486,4.377708),
        new google.maps.LatLng(50.900868,4.328957),
        new google.maps.LatLng(50.889174,4.293251),
        new google.maps.LatLng(50.880294,4.297028),
        new google.maps.LatLng(50.861878,4.279175),
        new google.maps.LatLng(50.855593,4.288788),
        new google.maps.LatLng(50.837817,4.282608),
        new google.maps.LatLng(50.835866,4.259605)
        ];

        $(document).ready(function () {
            //WHERE TO CENTER YOUR MAP
            var latlng = new google.maps.LatLng(50.834999,4.387665);
            var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var BrusselsHightlight;

            //DRAW THE POLYGON OR POLYLINE
            BrusselsHightlight = new google.maps.Polygon({
                paths: brussels,
                strokeColor: "#6666FF",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#6666FF",
                fillOpacity: 0.35
            });
            BrusselsHightlight.setMap(map);

        });

    </script>
    <style type="text/css">
        html,body { height: 100%; margin: 0px; padding: 0px; }
        #map_canvas {
            width:600px;
            height:400px;
        }       
    </style>
</head>
<body >
<div id="map_canvas">

</div>
<!--main-->
<div id="map_cord"></div>
</body> 
</html>

Cela a vraiment bien fonctionné pour moi.

8
jurihandl

Le point final Twitter api geo ne vous indiquera PAS les limites de la ville,

ce qu'ils vous fournissent est SEULEMENT une boîte englobante avec 5 points (lat, long)

c’est ce que j’obtiens de Twitter api geo pour San Francisco  enter image description here

0
hoogw