I am trying to reverse geocode the latitude and longitude of my google maps and show the formatted address of the markers current position in a window when I have finished dragging the marker with dragend.
So far I have managed to get the window updating on dragend and displaying the longitude and latitude of it's current position but I am unable to display the address using reverse geocode.
I have followed the demo on the site and tried to implement it but can;t get it to work.
This is my code:
google.maps.event.addListener(marker, "dragend", function (event) {
var point = marker.getPosition();
map.panTo(point);
document.getElementById("latitude").value = point.lat();
document.getElementById("longitude").value = point.lng();
infowindow.setContent('<div><strong>' + marker.getPosition() + '</strong><br>' + address);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({latLng: event.latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
infoWindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
}
}
});
});
try with
geocoder.geocode({latLng: point}, function(results, status) {
example
Related
i can't get address when dragend map (but work if dragend marker)
google.maps.event.addListener(map, 'dragend', function(event) {
myMarker.setPosition(this.getCenter()); // set marker position to map center
updatePosition(this.getCenter().lat(), this.getCenter().lng());
JSfiddle
http://jsfiddle.net/turq2myw/
You need to pass co-ordinate in map drag to get the address like this event does not contain the latlng
geocoder.geocode({
'latLng': this.center
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var alamat = results[0].formatted_address;
document.getElementById("alamat").value = alamat;
// alert(alamat);
}
}
});
See this FIDDLE
I have just started working with the Google Maps API and Geocoding Service. I followed this tutorial and it was great.
Now I want to be able to create a map with a center based on a location ( "Vancvouer, BC" ) as opposed to latitude and longtitude as required when creating the map.
What I am trying to do is use a callback function named "initMap()" to initialize the map, and in that function I am creating a Geocoder object to get lang and long based on a location. ( "Vancvouer, BC" ).
Here's my initMap() function:
function initMap() {
var geocoder1 = new google.maps.Geocoder();
var center = getCenter(geocoder1, 'Vancouver, BC');
if(center != null) {
alert(center[0].geometry.location);
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: -34.397, lng: 150.644}
});
}
This is how I am getting lang and long based on address:
function getCenter(geocoder, address) {
geocoder.geocode({'address': address}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
console.log(results);
var result = results[0].geometry.location.toJSON();
return result;
} else {
alert('Geocode was not successful for the following reason: ' + status);
// return null;
}
});
}
This will return a JSON object with the lat and lang I want, but when I try to access its values in initMap() using the if statement center is always undefined.
Once I am able to get the value for center I believe I would be able to set the center easy enough, but why I am not getting these values?
I think its a problem with scope and callback functions, but cant figure it out. Been stuck for a while, thought I'd reach out for help.
Thanks,
Matt
P.S. Let me know if you need any other info. First post on stackoverflow...
The geocoder is asynchronous, you can't return anything from an asynchronous callback function. You need to use the returned data inside the callback function where/when it is available:
function setCenter(geocoder, address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
// return null;
}
});
}
proof of concept fiddle
code snippet:
function initMap() {
var geocoder1 = new google.maps.Geocoder();
setCenter(geocoder1, 'Vancouver, BC');
}
function setCenter(geocoder, address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
// return null;
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
You do not need to convert the results to Json. Use
center[0].geometry.location
This can be assigned to the center property of the map object. To check for null:
if (center[0] != null)
Set center by address after map ini:
example:
set_center(address)
function set_center(address) {
var 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 "map" must be ini with google map, example
var map = new google.maps.Map(document.getElementById('main-map'), mapOptions);
I would like to be able to place a marker on a Map and have it display the full address, including street number and name.
Currently, I have this somewhat working but for reasons I do not understand this only retrieves the Suburb name of where the marker is placed, even if I zoom right in and place the marker on a building.
I am following the Reverse Geocoding example here, combining it with the Add Marker script.
Would anyone know how to retrieve the full address when placing a marker?
My code is:
function addMarker(location) {
geocoder.geocode({'location': location}, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
if (results[1]) {
map.setZoom(16);
var marker = new google.maps.Marker({
position: location,
map: map
});
markers.push(marker);
infowindow.setContent(results[1].formatted_address);
var markerAddress = results[1].formatted_address;
console.log(markerAddress);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});//GEOCODER
}//ADD MARKER
I had to change it to get the first level of results:
infowindow.setContent(results[1].formatted_address);
I don't know why they're broken up like that, but there you go
I am new in Javascript and google map api and I have been follow this link to remove a marker but some how I cannot make it work.
Basically I want to use a button to generate the marker when user enter an address and click on the button. When the user enter a new address and click on the button again, the old marker will be removed and the new marker pin on the new address. The marker also draggable.
Here is my js code:
$('#geocode').live('click',function() {
codeAddress();
return false;
});
function codeAddress() {
var address = document.getElementById('location').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 (marker) delete marker;
var marker = new google.maps.Marker({
draggable:true,
map: map,
position: results[0].geometry.location
});
var newlat = results[0].geometry.location.lat();
var newlng = results[0].geometry.location.lng();
document.getElementById('mwqsflatlng').value = (newlat+' , '+newlng);
draggeablemarker(marker);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
Update
When I check on the inspect element, it gave me this error:
Uncaught TypeError: Cannot call method 'setMap' of undefined
You need to have a reference to your marker object to be able to access it at a later time. If you want to restrict the map to one marker showing at a time you can update the markers Position property instead of deleting and recreating it.
Here is a function that can change the markers position or create a new marker if one does not exist on the map. The location parameter is a Google LatLng object which is the same as the object returned by the Geocoder results[0].geometry.location.
Notice the marker variable is defined outside of the function scope. This is what allows you to refer to the marker at a later time.
var marker;
function placeMarker(location) {
if (marker) {
//if marker already was created change positon
marker.setPosition(location);
} else {
//create a marker
marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
}
}
So for your geocode success function you should only have to pass the result to this function.
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
placeMarker(results[0].geometry.location);
}
...
Here is a fiddle of of the concept. You can click on the map and the marker will move to the desired location.
Can somebody tell me is is possible to drop a pin on specific address on a map generated Google Maps v3 library? I need to send an address to script, and marker should be dropped on that address...
Thank you in advance!
if you have an address, you will need to geocode it first, then you can create the marker:
geocoder.geocode({ 'address': addressThatYouWannaDraw }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
pt = results[0].geometry.location;
var myMarkerOpts = {
position: pt,
map: map
};
var marker = new google.maps.Marker(myMarkerOpts);
}
});
map here is your google.map.Map element