This question already has an answer here:
How do I return a longitude and latitude from Google Maps JavaScript geocoder? [duplicate]
(1 answer)
Closed 9 years ago.
I can setup a pushpin on map but i am not able to retrieve the latitude and longitude of that point. Here is my code. Can anyone help with this?
Thanks
function codeaddress() {
var geocoder;
//map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
geocoder = new google.maps.Geocoder();
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({
animation: google.maps.Animation.BOUNCE,
flat: false,
map: map,
position: results[0].geometry.location
});
var latt = document.getElementById("latitude");
latt.value = results[0].geometry.location.getlatitude();
alert(latt.value);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
try using .lat() instead of .getLatitude().
see the API about the LatLng class: https://developers.google.com/maps/documentation/javascript/reference#LatLng
Related
google map marker not showing in bootstrap modal.
this is my jquery code :
function map_init() {
if(!$('body').data('map')){
var var_mapoptions = {
zoom: 6,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
}
};
$('body').data('map',new google.maps.Map($('<div id="map"/>')[0],
var_mapoptions));
}
return $('body').data('map');
}
var Lat;
var lon;
$(document).on('click','a[data-map]',function(){
var data=$(this).data('map'),
map=map_init();
var geocoder = new google.maps.Geocoder();
var address = data;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
}
Lat = latitude;
lon = longitude;
});
$('#map_modal')
.find('.modal-body')
.append(map.getDiv())
.end()
.find('.modal-title')
.text(data.Name)
.end()
.one('shown.bs.modal',function(){
google.maps.event.trigger(map, "resize");
map.setCenter({lat:Lat,lng:lon});
});
})
.modal('show');
});
it's showing modal , but not showing the map marker. the latitude and longitude values are came from php code( that is from while loop value).
I believe you did not created any Google Maps Javascript API Markers object.
A marker identifies a location on a map. By default, a marker uses a
standard image. Markers can display custom images, in which case they
are usually referred to as "icons."
I would suggest to edit and add this code inside this line:
if ( status == google.maps.GeocoderStatus.OK ) {
//add marker code here
}
code to be added:
var marker = new google.maps.Marker({
positions : new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng() ),
map: map,
title: 'I am a marker :)'
});
And your Marker will appear.
This question already has answers here:
Using Address Instead Of Longitude And Latitude With Google Maps API
(5 answers)
Closed 8 years ago.
Using Google Maps API, I would like to center the map to a string instead of Lat/Lng
var mapOptions = {
center: "Paris"
};
You can use the geocoder.
Working code snippet:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 8,
center: latlng
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Call the codeAddress function (once) when the map is idle (ready)
google.maps.event.addListenerOnce(map, 'idle', codeAddress);
}
function codeAddress() {
// Define address to center map to
var address = 'Paris, France';
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Center map on location
map.setCenter(results[0].geometry.location);
// Add marker on 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);
}
});
}
initialize();
#map-canvas {
height: 180px;
}
<div id="map-canvas"></div>
<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
JSFiddle demo
Edit: of course you can geocode a complete address like this:
// Define address to center map to
var address = 'Rue Casse-Cul, Montboucher-sur-Jabron, France';
I am trying to find some minamilistic google geocoding script. The ones I have found are very large and complicated, but this one is very simple. The only thing it doesnt do is actually put the co-ordinates in two input boxes like the others.
Here is the code working:
http://jsfiddle.net/Rr5PL/89/
How do I get it to put the co-ordinates in a long / lat input field? It must have them stored because it uses them to display on the map.
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,
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);
}
});
}
You can simply take them from the Javascript variables. You don't need input fields.
var lat = results[0].geometry.location.lat();
var lon = results[0].geometry.location.lng();
var url = 'www.url.com/search?lon='+lon+'&lat='+lat;
In order to put latitude and longitude in text fields you need to create 2 text boxes first and put latitude and longitude.
var latitude= results[0].geometry.location.lat();
var longitude=results[0].geometry.location.lng();
This jsfiddle shows an example.
http://jsfiddle.net/harendra/njDvn/6/
It's easy, try this
var loc=results[0].geometry.location;
document.getElementById('latLng').value=loc.lat()+', '+loc.lng();
DEMO.
I modified the javascript from https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple to
var geocoder;
var postalArr = [];
postalArr.push(249586);
postalArr.push(266751);
var map;
function initialize(){
var myLatlng = new google.maps.LatLng(1.3667, 103.7500);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
if (postalArr) {
for (var i = 0; i < postalArr.length; i++ ) {
codeAddress(postalArr[i]);
}
}
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
function codeAddress(postal) {
geocoder.geocode( { 'postal': postal}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var markerE = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
The script goes within the for loop but doesn't run the codeAddress function.
I'm not sure why.
Two things.
(1) need to define geocoder somewhere, I put it in the initialize
function initialize(){
geocoder = new google.maps.Geocoder();
(2) there's no such thing as a postal property to feed the geocoder. Valid requests are for a latlng or an address as explained here.
So at least you must specify a country. I'm not sure what country 249586 is for, in my demo I used two California zip codes, and added ", United States" to the address.
geocoder.geocode( { 'address': postal + ", United States"},
How do you do a Reverse Geocode on the clientside using Google Maps V3 API? The forward geocode from address to LatLng is straight forward (code below), but how do you do the same for reverse geocode?
Normal Geocode Code:
geocoder = new google.maps.Geocoder();
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
});
The process is exactly the same, with the minor difference that instead of supplying an address object to the geocode function you supply a LatLng object
Reverse Geocode Code:
var input = document.getElementById("latlng").value;
var latlngStr = input.split(",",2);
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(11);
marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
Example directly from Google
Hope that helps.