Develop Reference

How to set center of google map based on street address

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);

Only the first marker showing on google map

I have a problem showing addresses on Google Maps. I have tried everything but its not working. It shows only the first marker even if I click on other addresses. How can I get it to show the other markers?
<xsl:for-each select="Attractions/Museums">
<xsl:value-of select="address"/>
</xsl:for-each>
<script type="text/javascript">
var map;
var geocoder = new google.maps.Geocoder();
$( "#maps" ).on( 'pageshow', function() {
google.maps.event.trigger(map,'resize');
})
// initialize the map
function initialize() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
function addMarker() {
var address = document.getElementById("addMarker").text;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var image = 'flag1.png';
var markers = new google.maps.Marker({
map: map,
icon: image,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);

All your links (anchor tags) have the same ID attribute, so when the function runs it pick the last one to take the marker data from.
Try using different ID attribute for each link and sending the function that ID as a parameter.

Google map api v3 - remove old marker when doing geocoding

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.

Drop a pin on specific address using Google Maps v3

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

Why isn't my google maps API reverse geocoder showing results?

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