Getting latitude and longitude of a location using Google API and passing of variables
Question
I got this code from Google API and I want to extract the location's latitude and longitude so I can find the 10 nearest location around it.
Javascript:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=mykeyhere&sensor=true"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(14.5833, 120.9667);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
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);
}
});
}
</script>
Body:
<body onload="initialize()">
<div id="map-canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
There is a textbox where the user will enter a location and the javascript puts a marker on google maps. How can I get the latitude and longitude separately and pass it to the html body ?
What I'm trying to do is after I get the coordinates, I will search the 10 nearest location from the database (where latitude and longitudes are fields). And then how can I put markers to those 10 nearest locations on the map ? Please help me. Thank you!
2 answers
solution1
0 2013-08-31 13:05:08
This is probabbly what you need
https://developers.google.com/maps/documentation/geocoding/?csw=1 try this function
function getLatLong(address){
var geo = new google.maps.Geocoder;
geo.geocode({'address':address},function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
return results[0].geometry.location;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
solution2
0 ACCPTED 2013-08-31 13:06:10
The latitude and longitude are held in your results[0] but under results[0].location.lat() and results[0].location.lng() . These can be passed back to the html by specifying the element you want to apply them to and populate the html with the information, something like:
document.getElementById('coords').innerHTML(results[0].location.lat() + ', ' + results[0].location.lng());
To add new markers to a map ideally you need first to set up an array to hold the markers you create. Then, when you have the new markers information, push them to the array. This will accomplish two things. One, the markers will be automatically added to the map. Second, if you need to change the markers in any way (perhaps by clearing them from the screen, or deleting them altogether) you can perform an action on the array.
Here's a couple of quick functions related to that (assumes your array is called markers .)
function clearMarkers() { // clears markers but doesn't remove them from the markers array
for (var i = 0, l = this.markers.length; i < l; i++) {
this.markers[i].setMap(null);
}
};
function deleteMarkers() {
this.markers = [];
}
In order to add a marker to the array you need to define it, something along the lines of:
function addMarker(latlng) {
var marker = new google.maps.Marker({
draggable: false,
raiseOnDrag: false,
icon: // icon path
animation: google.maps.Animation.DROP,
position: latlng, // google latlng coords
map: // element holding your map
});
markers.push(marker);
}
Everything you need is available in the Google Maps API .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.