google maps api 3 - icon - API de Google Maps v3: obtener el mapa por dirección?
google maps marker icons gallery (6)
Hay un complemento para jQuery que lo hace, su nombre es gMap3, y puedes verlo en acción aquí:
http://gmap3.net/examples/address-lookup.html
y aquí
Soy nuevo en Google Maps y me gustaría integrarlo en mi sitio web (tipo de sitio de páginas amarillas).
Actualmente tengo el siguiente código:
<!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>
Este código funciona y me muestra el mapa para el Lat / Long específico
pero, quiero poder especificar una dirección y no parámetros de lat / long, ya que tengo las direcciones de las compañías en la agenda, pero no tengo los valores de lat / long.
Intenté buscar esto, pero solo encontré algo similar en la versión V2, que estaba en desuso.
Lo que estás buscando es la función Geocode en el servicio de Google; primero dé una dirección para obtener un LatLng, luego llame a setCenter para desplazar el mapa a la ubicación específica. La API de Google lo envolvió muy bien y puedes ver cómo funciona a través de este ejemplo :
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);
Puede usar el geocodificador de Google: http://code.google.com/apis/maps/documentation/geocoding/ Tenga cuidado: puede estar fuera de cuota y la solicitud al geocodificador fallará
El uso de la API de geocodificación de Google está sujeto a un límite de consulta de 2,500 solicitudes de geolocalización por día.
Si está de acuerdo con un iframe, puede omitir la molestia de geocodificación y utilizar la API de incrustación de Google Maps :
La API de incrustación de Google Maps es de uso gratuito (sin cuotas ni límites de solicitud), sin embargo, debe registrarse para obtener una clave de API gratuita para incrustar un mapa en su sitio.
Por ejemplo, insertaría esto en su página (reemplazando los puntos suspensivos con su propia clave personal de API de 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>
Obviamente, la utilidad de esto dependerá de su caso de uso, pero me gusta esto como una solución rápida y sucia.
gmap3 no lo hace por ti, como lo sugiere otra respuesta: solo te da una API para abstraer la parte de geocodificación del proceso.
La respuesta es: Google en realidad ya no te permite hacer eso. Al menos no en V3, y desde hace más de un año ...
En realidad, podría enviar direcciones para indicaciones de manejo, pero su API ha hecho que sea ilegal enviar una dirección para un mapa normal (incrustado, basado en API) de cualquier tipo. La cuota diaria de geocodificación es su juego en direcciones "aún permitidas" y, en realidad, las rechazan para cualquier sitio web real.
Puede vincularse a un mapa con una dirección, aunque tampoco puedo encontrarlo en los documentos de Google:
http://maps.google.com/maps?f=d&saddr=&daddr=this es mi dirección, ciudad estado
Tal vez solo tengo un problema con esto porque no proporcionan ninguna documentación clara y fácil. Tengo que ir a para obtener las respuestas que estoy buscando. Es decir. mencionan vagamente que necesita una clave de API para omitir los límites anónimos, pero no se vinculan con cuáles son esos límites o cómo usar su API sin una clave. Que es lo que quiero hacer para skunkworks o desarrollo de prueba de concepto. En su lugar, Google desea impulsar sus Maps for Businesses, etc., en lugar de proporcionar información real.
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>