I would like to use GoogleMaps API v3.
Before, I was using version n°2 and I had just to put the address and the map was displayed.
Is it always possible with version n°3 ?
If yes, how ?
I always find scripts with latitude, longitude... but no script with address.
Thanks a lot and sorry for my poor english.
I guess you mixed up Maps-Javascript-API and the Static-Maps-API(current Version is V2).
In the static-maps-API you may use an address as center-parameter.
In the Javascript-APIs you need a LatLng (no matter if V2 or V3). If you only have an adress, you must request the LatLng using a geocode-request.
Basically you need to look for something called geocode. It is a part of API documentation. something like below will help:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
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);
}
});
}
Helpful Link
Related
We have a working Google Maps API (V2) module working correctly on our custom made CMS.
I cannot figure out why but this code seems to be having troubles processing one specific Address. What's weird is that the address can be found normally on Google Maps.
Here are two examples, one address that works perfectly and the address that Google Maps API cannot find :
Working Address : via Zups 2, 7013 Domat/Ems
<script>
initialize( "googlemap-viazups17013domat/ems", "via Zups 2 7013 Domat/Ems" )Marly" )
</script>
working HTML output (cleaned up)
Unworking Address : via Zups 1, 7013 Domat/Ems
<script>
initialize( "googlemap-viazups17013domat/ems", "via Zups 1 7013 Domat/Ems" )
</script>
non Working HTML output (cleaned up)
Also note that if I change the address to display Number 2 of the same street it works! But Number 1 never works.
––––
Edit :
Here is the initialize function :
function initialize( div, address ) {
var geocoder;
var map;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
map = new google.maps.Map(document.getElementById( div ), myOptions);
//map.disableDragging()
if (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
});
} else {
alert("Impossible de localiser " + address);
}
});
}
}
Can any suggest why this code doesn't provide 2 markers on my map?
http://pastebin.com/1uaNjeVy
I'm not sure whether it is a syntax error or a restriction by google?
Edit:
I got it working by doing the below anyway, apologies for not posting the code direct to here.
My new issue is that when I open the page sometimes it finds all of the addresses, other times it brings up the alert?
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': "Eldon Square 24-26 Sidgate, Newcastle upon Tyne"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var img = "https://dl.dropboxusercontent.com/u/55888592/marker26.png";
var info = "<div><p>Sometext</p></div>";
var infowindow = new google.maps.InfoWindow({
});
var latlng = results[0].geometry.location;
var marker = new google.maps.Marker({
icon: img,
position: latlng,
map: map,
content: info
});
google.maps.event.addListener(marker, "click", function(content) {
infowindow.setContent(this.content);
infowindow.open(map,this);
});
} else {alert("alert");
}
marker.setMap(map);
});
The geocoder is asynchronous. Your are setting the marker map variable before the marker is created. You should do that in the callback function of the geocoder. (The javascript console is your friend)
And your marker images fail to load from the URL provided (probably because it is https)
working example
I am not sure my question is valid. But I have some requirement like below.
Is it possible get a place object with specific lat and lng?
In details when we use autocomplete method we can get the place object like: "place = autocomplete.getPlace();".
Is it possible to call getPlace() method for specific lat and lng or any other solution available?
To be precise, what you're asking is called Reverse Geocoding.
Wiki:
Reverse geocoding is the process of back (reverse) coding of a point
location (latitude, longitude) to a readable address or place name.
Yes Google provides reverse geocoding service. But it is not a single line which you mentioned in your question.
It has its own procedure.
Check Google's Reverse Geocoding for more information.
You may find the below code useful.
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder(); // * initialize geocoder class
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 getPlace() {
var lat = your Latitude; // give valid lat
var lng = your Longitude; // give valid lng
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
});
}
else {
//handle error status accordingly
}
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Hope your understand.
I wonder if there is a way to use zipcode instead of Lat and Lng, using this snippet or using Geocoding Requests.
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(22.1482635,-100.9100755);
// var latlang = new google.maps.zipcode(7845); <- Is there a way to do that?
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"zipcode"
});
}
</script>
You can use the Google GeoCode API to request the latitude and longitude for the zipcode and go from there.
The API Request URL would look like this if you wanted to do this directly or via some other medium
http://maps.googleapis.com/maps/api/geocode/json?address=50323&sensor=false
Where 50323 is your zip code.
Or you could use the google Javascript API to do this all via jQuery.
var geocoder; //To use later
var map; //Your map
function initialize() {
geocoder = new google.maps.Geocoder();
//Default setup
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
//Call this wherever needed to actually handle the display
function codeAddress(zipCode) {
geocoder.geocode( { 'address': zipCode}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Got result, center the map and put it out there
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);
}
});
}
I have a page about hiking in various countries. I am trying to make a page like that for each country, but not sure how to automatically center the google map around a country and also have it adjust the focus depending on the size of the country.
Here are my problem pages:
http://www.comehike.com/outdoors/country.php?country_id=6&country_name=Belarus
http://www.comehike.com/outdoors/country.php?country_id=1&country_name=United%20States
You see how the centering and focus size is static? That is because I currently use this code to center the map:
function initialize( )
{
var myLatlng = new google.maps.LatLng(37.775, -122.4183333);
var myOptions =
{
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
But that is only because I am not sure how to do it by country name, and adjust the size automatically. How can I do this all by passing a country name into the initialize function?
Thanks!
You can transform country name to the coordinates using Geocoding service. Example provided by Google centers a map but it does not zoom it. To zoom it you should use map.fitBounds() method using LatLngBounds object returned by the geocoder.
This is an example code:
var myLatlng = new google.maps.LatLng(37.775, -122.4183333);
var myOptions =
{
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var address = "Belarus";
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);
map.fitBounds(results[0].geometry.bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});