Develop Reference

How would I get country name after dragend and autocomplete with google maps?

This is the code I am using:
defaultLatLong = {
lat: 45.4667971,
lng: 9.1904984
};
var map = new google.maps.Map(document.getElementById('map-canvas_1'), {
center: defaultLatLong,
zoom: 2,
mapTypeId: 'roadmap',
disableDefaultUI: true,
zoomControl: true
});
var input = document.getElementById('location-text-box');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var marker = new google.maps.Marker({
map: map,
position: defaultLatLong,
draggable: true,
clickable: true
});
google.maps.event.addListener(marker, 'dragend', function(marker) {
locationsArray.push(country);
console.log(country);
var latLng = marker.latLng;
currentLatitude = latLng.lat();
currentLongitude = latLng.lng();
var latlng = {
lat: currentLatitude,
lng: currentLongitude
};
var geocoder = new google.maps.Geocoder;
geocoder.geocode({
'location': latlng
}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
input.value = results[0].formatted_address;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
});
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
}
marker.setPosition(place.geometry.location);
currentLatitude = place.geometry.location.lat();
currentLongitude = place.geometry.location.lng();
});
I tried the following as I used to use it with another googlemaps code but that ain't working as it is firing an error:
google.maps.event.addListener(marker, 'dragend', function(marker) {
var country = filtered_array.length ? filtered_array[0].long_name: "";
Error:
Uncaught ReferenceError: filtered_array is not defined
Ideally I would like to get all the infos:
Address, Country name and so on..

Got my own answer. Since I am using both autocomplete and dragend, we need to loop with the results after the callback:
So find in the code posted in the question for the dragend input.value = results[0].formatted_address; and do:
var arrAddress = results[0].address_components;
$.each(arrAddress, function (i, address_component) {
console.log(address_component.long_name); // here's your town name
});
And then for the autocomplete find currentLongitude = place.geometry.location.lng(); and then do
var arrAddress = place.address_components;
$.each(arrAddress, function (i, address_component) {
console.log(address_component.long_name);
});
Now all the details of the address can be saved in different inputs or vars

Try the following code to get country, province/state and city:
geocoder.geocode({'location': latLng}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
//map.setZoom(11);
$.each(results[0].address_components, function(i, address_component){
console.log(address_component.long_name);
switch(address_component.types[0]){
case "country": {
console.log("Country: " + address_component.short_name);
break;
} case "administrative_area_level_1": {
console.log("Province/State:" + address_component.short_name);
break;
} case "administrative_area_level_2": {
console.log("City: " + address_component.short_name);
break;
}
}
});
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});

Combine variables in a string, reverse geocoding - javascript

I try to get back the adress of the point where the "user" clicks on the "google map" I have implemented on my website.
I copied the source code form developers.google.com and made a view adaptations. In the source from google, you get the "latlng" by an input field. I get it by a "event".
In my "geocode-function" I sum my "lat" and "lng" parameters together to what they would have looked like if they came out of the input field.
Here is the code:
// Set variables
var clicklat;
var clicklng;
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow;
// Listen for click on map
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
clicklat = parseFloat(event.latLng.lat());
clicklng = parseFloat(event.latLng.lng());
geocodeLatLng(geocoder, map, infowindow);
});
// Geocode function
function geocodeLatLng(geocoder, map, infowindow) {
var input = "#{clicklat},#{clicklng}"
var latlngStr = input.split(',', 2);
var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
if (results[1]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
Now, the problem I have is that console.log(input); gives back: #{clicklat},#{clicklng}. Why, the heck, my variables get not implemented there?

It looks like you are trying to usea "jade" and is not working?
Anyway Here is a way to make it work:
// Set variables
//var clicklat;
//var clicklng;
var geocoder = new google.maps.Geocoder();
var infowindow = new google.maps.InfoWindow;
// Listen for click on map
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
//clicklat = parseFloat(event.latLng.lat());
//clicklng = parseFloat(event.latLng.lng());
geocodeLatLng(geocoder, map, infowindow, event.latLng); //I add this as a parameter
});
// Geocode function
function geocodeLatLng(geocoder, map, infowindow, thelocation) {
// var input = "#{clicklat},#{clicklng}"
// var latlngStr = input.split(',', 2);
// var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
geocoder.geocode({'location': thelocation}, function(results, status) {
if (status === 'OK') {
if (results[1]) {
map.setZoom(11);
var marker = new google.maps.Marker({
position: results[1].geometry.location,
map: map
});
infowindow.setContent(results[1].formatted_address);
infowindow.open(map, marker);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}

move marker and update place in google maps

I am using google maps, And in a textfield you can type a place and then you will see a marker on the google maps with the coordinates. You can also move the maker and then the coordinates in the info box will be updated. But how to update also the place name in the textfield? Thank you.
This is the jquery script:
var map;
function initMap() {
var geocoder = new google.maps.Geocoder();
var startaddress = $('#form_inp19').val();
geocoder.geocode({ 'address': startaddress }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
startLocationMap = results[0].geometry.location;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: startLocationMap
});
geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function () {
geocodeAddress(geocoder, map);
});
} else {
alert('Place doesnt exist on the map: ' + status);
}
if (typeof google.maps == 'undefined') {
/* custom functions to alert the user to the error */
return 0;
}
});
}//end function initMap
$(document).ready(function () {
if (typeof google.map == 'undefined') {
return 0;
}
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
});
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
var marker;
var infowindow;
function geocodeAddress(geocoder, resultsMap) {
if (typeof infowindow != 'undefined') {
infowindow.close();
}
if (typeof marker != 'undefined') {
marker.setMap(null);
}
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
resultsMap.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: resultsMap,
draggable: true,
animation: google.maps.Animation.DROP,
position: results[0].geometry.location,
title: "Drag me!"
});
} else {
alert('Place doesnt exist on the map: ' + status);
}
infowindow = new google.maps.InfoWindow({
content: '<p>Marker Location:'
+ 'lat: ' + marker.getPosition().lat().toFixed(6)
+ ', '
+ 'lng: ' + marker.getPosition().lng().toFixed(6)
+ '</p>'
});
$(".geolocation_lat ").val(marker.getPosition().lat().toFixed(6)) //= marker.getPosition().lat().toFixed(6);
$(".geolocation_long ").val(marker.getPosition().lng().toFixed(6))
google.maps.event.addListener(marker, 'dragend', function (event) {
if (typeof infowindow != 'undefined') {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: '<p>Marker Location:'
+ 'lat: ' + event.latLng.lat().toFixed(6)
+ ', '
+ 'lng: ' + event.latLng.lng().toFixed(6)
+ '</p>'
});
$(".geolocation_lat ").val(event.latLng.lat().toFixed(6)); //= marker.getPosition().lat().toFixed(6);
$(".geolocation_long ").val(event.latLng.lng().toFixed(6));
infowindow.open(map, marker);
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function (event) {
if (typeof infowindow != 'undefined') {
infowindow.open(map, marker);
}
});
});
}
I have it now like this:
var map;
function initMap() {
var geocoder = new google.maps.Geocoder();
var startaddress = $('#form_inp19').val();
geocoder.geocode({ 'address': startaddress }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
startLocationMap = results[0].geometry.location;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: startLocationMap
});
geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function () {
geocodeAddress(geocoder, map);
});
} else {
alert('Place doesnt exist on the map: ' + status);
}
if (typeof google.maps == 'undefined') {
/* custom functions to alert the user to the error */
return 0;
}
});
}//end function initMap
$(document).ready(function () {
if (typeof google.map == 'undefined') {
return 0;
}
map = new google.maps.Map(document.getElementById('map'),
mapOptions);
});
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
var marker;
var infowindow;
//Added
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function (responses) {
if (responses && responses.length > 0) {
document.getElementById('address') = responses[0].formatted_address;
} else {
document.getElementById('address') = 'Cannot determine address at this location.';
}
});
}
function geocodeAddress(geocoder, resultsMap) {
if (typeof infowindow != 'undefined') {
infowindow.close();
}
if (typeof marker != 'undefined') {
marker.setMap(null);
}
var address = document.getElementById('address').value;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
resultsMap.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: resultsMap,
draggable: true,
animation: google.maps.Animation.DROP,
position: results[0].geometry.location,
title: "Drag me!"
});
} else {
alert('Place doesnt exist on the map: ' + status);
}
infowindow = new google.maps.InfoWindow({
content: '<p>Marker Location:'
+ 'lat: ' + marker.getPosition().lat().toFixed(6)
+ ', '
+ 'lng: ' + marker.getPosition().lng().toFixed(6)
+ '</p>'
});
$(".geolocation_lat ").val(marker.getPosition().lat().toFixed(6)) //= marker.getPosition().lat().toFixed(6);
$(".geolocation_long ").val(marker.getPosition().lng().toFixed(6))
google.maps.event.addListener(marker, 'dragend', function (event) {
geocodePosition(marker.getPosition());
if (typeof infowindow != 'undefined') {
infowindow.close();
}
infowindow = new google.maps.InfoWindow({
content: '<p>Marker Location:'
+ 'lat: ' + event.latLng.lat().toFixed(6)
+ ', '
+ 'lng: ' + event.latLng.lng().toFixed(6)
+ '</p>'
});
$(".geolocation_lat ").val(event.latLng.lat().toFixed(6)); //= marker.getPosition().lat().toFixed(6);
$(".geolocation_long ").val(event.latLng.lng().toFixed(6));
infowindow.open(map, marker);
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function (event) {
if (typeof infowindow != 'undefined') {
infowindow.open(map, marker);
}
});
});
}
But I get the error:
'geocoder' is undefined
I only get this error:
Cannot assign to a function result
document.getElementById('address') = responses[0].formatted_address;
I see the address: responses[0].formatted_address "Belle van Zuylenlaan 23-24, 2642 Pijnacker, Nederland"
But how to get only the place name in the textfield?
Thank you

In your dragend listener,
google.maps.event.addListener(marker, 'dragend', function() {
geocodePosition(marker.getPosition());
});
and
function geocodePosition(pos) {
geocoder = new google.maps.Geocoder();
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
document.getElementById('yourTextBoxId').value=responses[0].formatted_address;
} else {
document.getElementById('yourTextBoxId').value='Cannot determine address at this location.';
}
});
}
Here is a working example (puts the address received from the reverse geocoder in the infowindow)

Geocoder is automatically panning google map to the left

I am creating a page with a marker that stays fixed at the center of a map, even if the user pans/zoom the map. When the user clicks on the marker it shows the full address of the marker.
The problem is that the infoWindow.setContent() shows a string when I supply one, but pans the map to the left (and doesnt show the infoWindow) when I supply results[0].formatted_address.
The code below is the reverse geocoding I have. The alert function (which I have uncommented) shows the address correctly.
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': input}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
//alert(results[0].formatted_address);
infoWindow.setContent(results[0].formatted_address);
infoWindow.open(map,marker);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
And my complete Javascript Code is:
var map;
var marker;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
function setUpMap(){
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(22.519422, 88.35741400000006),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
google.maps.event.addListener(map, 'center_changed', function() {
removeMarker();
});
google.maps.event.addListener(map, 'idle', function() {
setMarker();
});
}
function removeMarker(){
marker.setMap(null);
}
function setMarker(){
marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
var input = marker.getPosition();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': input}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
//alert(results[0].formatted_address);
infoWindow.setContent(results[0].formatted_address);
infoWindow.open(map,marker);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
});
}
setUpMap();
}
google.maps.event.addDomListener(window, 'load', initialize);
I think the problem is that, when the user clicks on the marker, somehow setMarker() gets called. I can't really find out where the problem is coming from. Can anyone help me find it?

It's forced by a interaction between the center_changed-handler and the autoPan of the infoWindow.
When you open a infoWindow the API by default tries to pan the map to be able to show the infoWindow at the best position. But when this happens the center of the map changes, the marker will be removed(that's why you don't see the infowindow). You must set the disableAutoPan-option of the infoWindow to true.
Modified code:
function initialize() {
function setUpMap() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(22.519422, 88.35741400000006),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
infoWindow = new google.maps.InfoWindow({
disableAutoPan: true
}),
marker = setMarker(map, infoWindow);
google.maps.event.addListener(map, 'center_changed', function() {
infoWindow.close();
marker.setPosition(this.getCenter());
});
}
function setMarker(map, infoWindow) {
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: "Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
var input = marker.getPosition();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'latLng': input
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results)
if (results[0]) {
console.log(results[0].formatted_address)
//alert(results[0].formatted_address);
infoWindow.setOptions({
content: '<div style="xwidth:200px">' + results[0].formatted_address + '</div>'
});
infoWindow.open(map, marker);
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
});
return marker;
}
setUpMap();
}
google.maps.event.addDomListener(window, 'load', initialize);
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0
}
#map_canvas {
height: 100%
}
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_canvas"></div>

how to get latitude and longitude for placeMarker in my map along with my address when im moving my marker to a specified place that i located

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
google.maps.event.addDomListener(window, 'load', initialize);
var _map;
var _originMarker, _destinationMarker;
var _geocoder;
function initialize()
{
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(21.1289956,82.7791754)
};
_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
_geocoder = new google.maps.Geocoder();
_originMarker=createMarker('search-from');
_destinationMarker=createMarker('search-to');
google.maps.event.addListener(_map, 'click', function(mouseEvent)
{
if ((_activeMarker != null) && (!_activeMarker.getMap())) placeMarker(_activeMarker, mouseEvent.latLng);
});
}
function createMarker(_autoComplId)
{
var _autoCompl = document.getElementById(_autoComplId);
var _newmarker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
draggable: true,
map: null,
autoCompl: _autoCompl
});
google.maps.event.addListener(_newmarker, "dragend", function(event)
{
placeMarker(_newmarker, _newmarker.getPosition());
});
var _autocomplete = new google.maps.places.Autocomplete(_autoCompl);
_autocomplete.setTypes(['geocode']);
google.maps.event.addListener(_autocomplete, 'place_changed', function()
{
var _place = _autocomplete.getPlace();
if (_place.geometry == null) return;
setCenterAndZoom(_place.geometry.location, 16);
placeMarker(_newmarker, _place.geometry.location);
});
return _newmarker;
}
function placeMarker(_marker, _location)
{
_marker.setPosition(_location);
RenewAddress(_marker);
}
function RenewAddress(_marker)
{
_geocoder.geocode({'latLng': _marker.getPosition()}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
if (_marker.getMap() == null) _marker.setMap(_map);
_marker.autoCompl.value = results[0].formatted_address;
}
});
}
function setCenterAndZoom(_center, _zoom)
{
_map.setCenter(_center);
_map.setZoom(_zoom);
}
var _activeMarker = null;
function setActiveMarker(index)
{
switch(index)
{
case 0:
_activeMarker = _originMarker;
break;
case 1:
_activeMarker = _destinationMarker;
}
}
</script>
this is what im using to retrieve address,
and now i want to retrieve latitude and longitude along with my
address, in the above function RenewAddress(_marker)
iam using the _geocoder.geocode({'latLng': _marker.getPosition()}, function(results, status)
but iam unable to retrieve it i just got the result of the address
auto filled in the text box as an output but iam unable to retrieve
latitude and longitude

My version of RenewAddress() function is almost the same as your except that I retrieve lat/lng values before and show them in console.
function RenewAddress(_marker) {
console.log('RenewAddress');
var latlng = _marker.getPosition();
console.log(latlng.lat());
console.log(latlng.lng());
_geocoder.geocode({'latLng': _marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log('status ok');
if (_marker.getMap() == null)
_marker.setMap(_map);
_marker.autoCompl.value = results[0].formatted_address;
console.log(results[0].formatted_address);
console.log(_marker.autoCompl.value);
var exactAddress = document.getElementById('search-to');
exactAddress.value = _marker.autoCompl.value + ', lat/lng: ' + latlng.lat() + ':' + latlng.lng();
} else {
console.log('error: ' + status);
}
});
}
See example at jsbin with only one marker and latitude and longitude fields. Write something to town/city/country field, for example Odisha. Select it. After that marker should be shown, exact address should be set and latitude and longitude fields. If you move marker around, information will be changed.