javascript - longitud - google.maps.marker example
Usar la dirección en lugar de la longitud y la latitud con Google Maps API (5)
Puede analizar la geolocalización a través de las direcciones. Crea una matriz con jquery de esta manera:
var addressesArray = [
''Address Str.No, Postal Area/city'',
//follow this structure
]
//loop all the addresses and call a marker for each one
for (var x = 0; x < addressesArray.length; x++) {
$.getJSON(''http://maps.googleapis.com/maps/api/geocode/json?address=''+addressesArray[x]+''&sensor=false'', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
var aMarker= new google.maps.Marker({
position: latlng, //it will place marker based on the addresses, which they will be translated as geolocations.
map: map
});
}
También tenga en cuenta que Google limita sus resultados si no tiene una cuenta de negocios con ellos, y puede obtener un error si usa demasiadas direcciones.
He oído que es posible enviar una dirección en lugar de Longitud y Latitud, y esto sería mucho más factible para mi sistema. El usuario debe ingresar su dirección al crear su perfil y luego su perfil mostrará un Google Maps de su casa. Actualmente tengo la API de Google Maps funcionando perfectamente con Longitude y Latitude:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="css.css" />
<title>Login Page</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(52.640143,1.28685),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(52.640143,1.28685),
map: map,
title: "Mark On Map"
});
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
</head>
Por favor, podría alguien ayudarme a modificar mi código para que permita que la API de Google Maps solicite una dirección en su lugar porque quiero leer la dirección del usuario directamente desde la base de datos mySQL.
Vea este ejemplo, inicializa el mapa a "San Diego, CA".
Utiliza el Geocoder API de JavaScript de Google Maps v3 para traducir la dirección en coordenadas que se pueden mostrar en el mapa.
<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>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var address ="San Diego, CA";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
geocoder.geocode( { ''address'': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: ''<b>''+address+''</b>'',
size: new google.maps.Size(150,50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, ''click'', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%">
</body>
</html>
fragmento de código de trabajo:
var geocoder;
var map;
var address = "San Diego, CA";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
geocoder.geocode({
''address'': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow({
content: ''<b>'' + address + ''</b>'',
size: new google.maps.Size(150, 50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: address
});
google.maps.event.addListener(marker, ''click'', function() {
infowindow.open(map, marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
google.maps.event.addDomListener(window, ''load'', initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas" ></div>
Aquí está mi código para generar un mapa desde la ubicación
Código HTML
<div class="col-md-2">
<address> <?php echo $doctorInfo[0]->serachLocation;?> // set address for which you need to generate map</address>
</div>
Código Javascript
<script>
$(document).ready(function(){
$("address").each(function(){
var embed ="<iframe width=''425'' height=''350'' frameborder=''0''
scrolling=''no'' marginheight=''0'' marginwidth=''0''
src=''https://maps.google.com/maps?&q="+
encodeURIComponent( $(this).text() ) +"&output=embed''>
</iframe>";
$(this).html(embed);
});
});
</script>
La geocodificación es el proceso de convertir direcciones (como "1600 Amphitheatre Parkway, Mountain View, CA") en coordenadas geográficas (como la latitud 37.423021 y la longitud -122.083739), que puede usar para colocar marcadores o posicionar el mapa.
Sería esto lo que está buscando: contiene código de muestra
https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests
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''), mapOptions);
}
function codeAddress() {
var address = document.getElementById(''address'').value;
geocoder.geocode( { ''address'': address}, function(results, status) {
if (status == ''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);
}
});
}
<body onload="initialize()">
<div id="map" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
O consulte la documentación Geocoder