google-maps - gratis - google maps jquery
Agregue el esquema "Área de búsqueda" en el resultado de google maps (4)
Como todavía no hay una solución ofrecida por la API de Google Maps, y completar las coordenadas manualmente no es asunto de nadie, aquí hay una joya de alternativa. Encontré esta respuesta en el sitio web de GIS: salvavidas absoluto (habría ahorrado muchos minutos a Jurihandl dibujando Calgary, arriba; D):
Puede obtener coordenadas de polígono en json para usar con googlemaps usando openstreetmap. Vaya a http://nominatim.openstreetmap.org/ . Busque un lugar como "San Francisco, CA"
Haga clic en "Detalles"
Busque la ID de OSM y cópiela (control + c), ejemplo: 2018776
Pegue el ID http://polygons.openstreetmap.fr/index.py y descargue el archivo JSON
Fuente: GIS
El año pasado, Google agregó esquemas del área de búsqueda a sus ofertas como se informó en muchos lugares, y visible en los propios mapas de Google. Por ejemplo here , e informado here y here .
Para ser explícito, esto es cuando Google agrega un esquema relacionado con la consulta de búsqueda. Si buscara una ciudad, un código postal o un código postal, Google resaltará esta región del mapa. Ejemplo:
Al parecer, esto no estaba disponible a través de la API, y solo a través de las propiedades web propias de Google.
Recientemente, noté algunos otros dominios que usan esta funcionalidad, por ejemplo en Twitter .
¿Hay una API separada que usan Twitter y otras grandes organizaciones? ¿Se ha agregado esta funcionalidad, pero aún no está documentada? ¿O simplemente me he perdido el anuncio y no puedo encontrar ningún documento?
Encontré una solución bastante buena para dibujar el límite de la ciudad.
Aquí hay una herramienta genial, donde puedes dibujar el borde de la ciudad. Puede ser tan exacto como quiera ser: http://www.birdtheme.org/useful/v3tool.html
En el lado derecho, obtienes una vista previa en vivo de tu código. Puede elegir entre KML y javascript. Cambiar a javascript. Luego copie sus coordenadas.
Aquí está el sitio completo donde se puede ver la frontera de Bruselas (Europa).
<!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>
Esto funcionó realmente genial para mí.
Los contornos que ve provienen de Twitter, deben haberlos almacenado.
Eche un vistazo al archivo json que se solicita cuando llama a la página de Twitter: http://api.twitter.com/1/geo/id/c3f37afa9efcf94b.json
Lo he intentado, geometry.coordinates[0][0] define un polígono fino (adivinar el contorno de Austin).
Cuando lo pruebe, observe que el orden del par es lng,lat no lat,lng
Por lo tanto, la twitter-geo-API puede ser un buen comienzo para implementar los esquemas. Afortunadamente, Twitter es compatible con JSONP para una solución de cliente.
Vea un ejemplo: http://jsfiddle.net/doktormolle/MRYm3/
<edit>
la API de Twitter ha cambiado, el ejemplo ya no funciona (se requiere autenticación)