i am trying to get address using reverse geocoding.
but there is some problem in geocoder.geocode({...}) line. even normal alert message also not display.
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(23.0171240, 72.5330533),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
var input=e.latLng;
var lat = parseFloat(input.lat());
var lng = parseFloat(input.lng());
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert(results[1].formatted_address);
}
});
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
add below line inside initialize() function.
var geocoder = new google.maps.Geocoder();
Related
I have a map on my website, in which i have to get user address by just dragging & drop marker onto any place on map. I have successfully display a map on my website. But i have no idea of How to Show that marker on map which can be dragged & get User addess by that. I have below code of maps which is getting user address by clicking on map. Thanks.
<div id='map-canvas'></div>
var myLatlng = new google.maps.LatLng(latitude,longitude);
var myOptions = {
zoom: 10,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var geocoder = new google.maps.Geocoder();
google.maps.event.addListener(map, 'click', function(event) {
geocoder.geocode({
'latLng': event.latLng
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
alert(results[0].formatted_address);
}
}
});
});
You should add a marker and a listener on drag end
in this sample the listner show the drag end lat, lng and performe geocode
<div id='map-canvas'></div>
var myLatlng = new google.maps.LatLng(latitude,longitude);
var myOptions = {
zoom: 10,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var geocoder = new google.maps.Geocoder();
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true,
title:"Drag me!"
});
marker.addListener('dragend', function(event) {
alert(event.latLng.lat() + ' ' + event.latLng.lng());
geocoder.geocode({
'latLng': event.latLng
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
alert(results[0].formatted_address);
}
}
});
});
google.maps.event.addListener(map, 'click', function(event) {
geocoder.geocode({
'latLng': event.latLng
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
alert(results[0].formatted_address);
}
}
});
});
I'm trying to add a marker using a button in Google Maps and I'm getting the error, cannot read property lat of null. I'm not that good in Javascript, any help?
function setmarker(){
setLatLng = new google.maps.LatLng(document.getElementById('latitude').value,document.getElementById('longitude').value);
alert(setLatLng);
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var mapOptions = {
zoom: 8,
//center: new google.maps.LatLng(-1.2921897,36.8288574)
};
var marker = new google.maps.Marker({
position: setLatLng,
map: map,
title: 'Obtained coordinate'
});
}
</script>
</head>
<body>
<div id="map-canvas"></div>
<div class="side-panel">
<div>Latitude:<br><input type="text" name="latitude" id="latitude" ></div>
<div>Longitude:<br><input type="text" name="longitude" id="longitude"></div><br>
<!-- <input type="submit" onsubmit="setmarker();"> -->
<button onclick="setmarker()">Show Marker</button>
</div>
When you do document.getElementById('latitude').value that returns the value as a string e.g. "51.23546" instead of the floating point number that Google's API expects.
To make sure they get passed to Google as floats, try:
setLatLng = new google.maps.LatLng(
parseFloat(document.getElementById('latitude').value),
parseFloat(document.getElementById('longitude').value)
);
Thanks for all the answers, stumbled upon the answer in the name of Reverse GeoCoding Service from Google that exactly did what I wanted to quite easily and in the exact way.
From the API: https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var marker;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.730885,-73.997383);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: 'roadmap'
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeLatLng() {
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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I was roaming on this site for any info on geocoding a marker. However, I have tried some of the answers but I did not manage to make it work (I am an amateur when it comes to coding), so could someone please help me with the geocoding of my marker? Apparantly, the marker is missing when using this code. I need to geocode postcode in this case, which is the zip code 1058JA. Thanks in advance!
var geocoder;
var map;
var Postcode;
Postcode = '1058JA';
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.368465, 4.903921);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
function codeAddress() {
geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': document.getElementById("address").value },
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
Postcode = results[0].geometry.location;
map = new google.maps.Map(document.getElementById("map_canvas"),
{
center: Postcode,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker=new google.maps.Marker({
position:results[0].geometry.location,
});
marker.setMap(map);
}
else {
document.getElementById("address").value = status;
}
}
);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
There are a few things wrong with your code.
1) codeAddress is never called (as Anto Jurković notes).
2) A new instance of map is created within codeAddress if it were ever called which is redundant.
3) While you've specified Postcode as a string at the top of the code, the geocoder is looking for the value of a input element instead.
Your code should something like this:
var geocoder;
var map;
var Postcode;
Postcode = '1058JA';
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.368465, 4.903921);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': Postcode }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
});
marker.setMap(map);
} else {
document.getElementById("address").value = status;
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Demo
I have used the following code to display the marker on the location I have dynamically searched for(code). Now I want to highlight the searched location boundary. (For instance, if I search 'Tokyo', it should mark the boundary of 'Tokyo'(chk the image for reference).
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
{
$('#noResults').html("Unsuccessful:" + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I have a XML file containing meteorological measures with their latitudes and longitudes.
I want to find the city corresponding to a given latitude and longitude with Javascript. How should I do ?
Thanks for your answers
// To initialisation Map and GeoCoder
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow();
var marker,map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// It is called Reverse Geocoding
var latlng = new google.maps.LatLng(41.850033, -87.6500523);
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);
}