javascript - puntos - google.maps.marker example
Cómo obtener la dirección formateada de un marcador arrastrado en Google Version Maps (1)
He creado un mapa de Google que le permite ingresar una dirección en un campo de texto. A continuación, lo lleva a la dirección que ingresó en el campo de texto y deja un marcador que se puede arrastrar que, cuando se arrastra, le muestra la Lat y Long y la Dirección Geolocalizada.
En lugar de mostrar la dirección anterior, me gustaría que al arrastrar el marcador se muestre en la esquina inferior la Dirección del marcador y no la dirección ingresada del campo de texto.
He intentado una serie de métodos en vano. lonlat [0] .formatted_address estaba entre algunas de las cosas que probé.
Tengo mi referencia de Google
Mi código está abajo:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
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,
draggable: true,
position: results[0].geometry.location
});
// Javascript//
google.maps.event.addListener(marker, ''dragend'', function(evt){
document.getElementById(''current'').innerHTML = ''<p>Marker dropped: Current Lat: '' + evt.latLng.lat().toFixed(3) + '' Current Lng: '' + evt.latLng.lng().toFixed(3) + ''</p>'';
});
google.maps.event.addListener(marker, ''dragstart'', function(evt){
document.getElementById(''current'').innerHTML = ''<p>Currently dragging marker...</p>'';
});
google.maps.event.addListener(marker, ''dragend'', function(evt){
document.getElementById(''info'').innerHTML = ''<p>Address: '' + results[0].formatted_address + ''</p>'';
});
google.maps.event.addListener(marker, ''dragstart'', function(evt){
document.getElementById(''info'').innerHTML = ''<p>Currently dragging marker...</p>'';
});
map.setCenter(marker.position);
marker.setMap(map);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
<style type="text/css">
#controls {
position: absolute;
bottom: 1em;
left: 100px;
width: 400px;
z-index: 20000;
padding: 0 0.5em 0.5em 0.5em;
}
html, body, #map_canvas {
margin: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body onLoad="initialize()">
<div id="controls">
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onClick="codeAddress()">
<div id="current" style="background-color:white;">Nothing yet...</div>
<div id="info" style="background-color:white;">Address:</div>
</div>
</div>
<div id="map_canvas"></div>
</body>
</html>
Debe usar el servicio de geocodificación inversa (como se muestra en el ejemplo al que se vincula) para recuperar la dirección formateada.
Este código de ese ejemplo llama al geocodificador inverso y usa la respuesta para mostrar la dirección de formato que devuelve:
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress(''Cannot determine address at this location.'');
}
});
}
Este es el oyente dragend que lo llama:
google.maps.event.addListener(marker, ''dragend'', function() {
updateMarkerStatus(''Drag ended'');
geocodePosition(marker.getPosition());
});
fragmento de código:
var geocoder;
var map;
var marker;
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById(''map_canvas''), mapOptions);
google.maps.event.addListener(map, ''click'', function() {
infowindow.close();
});
}
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
marker.formatted_address = responses[0].formatted_address;
} else {
marker.formatted_address = ''Cannot determine address at this location.'';
}
infowindow.setContent(marker.formatted_address + "<br>coordinates: " + marker.getPosition().toUrlValue(6));
infowindow.open(map, marker);
});
}
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);
if (marker) {
marker.setMap(null);
if (infowindow) infowindow.close();
}
marker = new google.maps.Marker({
map: map,
draggable: true,
position: results[0].geometry.location
});
google.maps.event.addListener(marker, ''dragend'', function() {
geocodePosition(marker.getPosition());
});
google.maps.event.addListener(marker, ''click'', function() {
if (marker.formatted_address) {
infowindow.setContent(marker.formatted_address + "<br>coordinates: " + marker.getPosition().toUrlValue(6));
} else {
infowindow.setContent(address + "<br>coordinates: " + marker.getPosition().toUrlValue(6));
}
infowindow.open(map, marker);
});
google.maps.event.trigger(marker, ''click'');
} else {
alert(''Geocode was not successful for the following reason: '' + status);
}
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
@media print {
html,
body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map_canvas" style="height:90%;top:30px"></div>