I have problems in using the Google Maps Javascript API to retrieve the coordinates based on the address. I searched through Google forum and found that Geocoding concept has resolved this issue.
But my application does not support Geocoding. Is it not possible to implement this logic using Javascript API
Example from Google API : https://developers.google.com/maps/documentation/javascript/geocoding?hl=fr :
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,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
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 {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
<body onload="initialize()">
<div id="map-canvas" style="width: 320px; height: 480px;"></div>
<div>
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Encode" onclick="codeAddress()">
</div>
</body>
Related
Am pulling my hair out trying getting GeoCoder working. I went so far as to just pull the example straight from Google and pasting into my HTML but it still doesn't work. Here is the code.
The address I capture from my field gets passed back into the geocoding function fine. Everything logs out to my console. But the map just refreshes and nothing happens.
I uploaded the code to my site as well. http://voidkat.com/geo/index.html
Please help!!
Google Maps Multiple Markers
Address:
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var geocoder;
var map;
var address;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
function codeAddress() {
e.preventDefault;
var address = document.getElementById("address").value;
console.log(address);
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);
}
});
}
</script>
</body>
</html>
You need to put onsubmit onto the form, not onclick on the button.
Also, to call a function, you must put parentheses after it, even if it doesn't accept parameters, so it would be e.preventDefault(); not e.preventDefault;. And in the case of onsubmit (or any on), events cannot be canceled inside the function, you must use onsubmit="event.preventDefault(); ...".
Demo: http://jsfiddle.net/eEEpj/
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body onload="initialize()">
<form id="addressForm" onsubmit="event.preventDefault();codeAddress();">
<div>
<label for="address">Address:</label>
<input type="text" name="address" id="address" />
<input type="submit" id="addressButton" value="Get Coordinates" />
</div>
</form>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var geocoder;
var map;
var address;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
console.log(address);
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);
}
});
}
/*
//de infowindowz
var infowindow = new google.maps.InfoWindow();
//de markers
var marker, i;
//de locationz
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
*/
</script>
</body>
</html>
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 use google map api v3 to get coordinate and address from a point, but google return address in French. Here the script i use to get the address, how can I force Google map to return the result in English.
var map;
var geocoder;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
function initialize() {
var myOptions = {
center: new google.maps.LatLng(36.835769, 10.247693 ),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
var marker;
function placeMarker(location) {
if(marker){ //on vérifie si le marqueur existe
marker.setPosition(location); //on change sa position
}else{
marker = new google.maps.Marker({ //on créé le marqueur
position: location,
map: map
});
}
document.getElementById('lat').value=location.lat();
document.getElementById('lng').value=location.lng();
getAddress(location);
}
function getAddress(latLng) {
geocoder.geocode( {'latLng': latLng},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
if(results[0]) {
document.getElementById("address").value = results[0].formatted_address;
}
else {
document.getElementById("address").value = "No results";
}
}
else {
document.getElementById("address").value = status;
}
});
}
}
According to the documentation you can change the language of presentation of the maps API by adding a language parameter, like so:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&language=ja">
Alternatively, according to this answer, you can change the service used using the google.load command, like so:
<script type="text/javascript">
google.load("maps", "2",{language: "de",base_domain: 'google.de'});
...
</script>
(code taken from linked question). Here's a link to the documentation for google.load. I'm thinking changing the base_domain will achieve the desired result, but I haven't tested it.
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
I have 50 markers on my map (V3 of the Google maps API) in an array called spots. I want to add a text field so users can put in their postcode and it will add an additional marker giving them their location in relation to the surrounding markers. I think I am pretty close with what i have below but it won;t output the marker on the map. I think there is a conflict because i already have an array of markers and it doesn't like me adding the additional marker through the function. How do i get that function to add an additional element to the array through the codeAddress() function? Or is that even the right way to do it?
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.51251523, -0.133201961),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, spots);
}
var spots = [
['River Street - Clerkenwell', 51.52916347, -0.109970527, '3.png', 2896, 'River Street - Clerkenwell'],
['Phillimore Gardens - Kensington', 51.49960695, -0.197574246, '3.png', 2897, 'Phillimore Gardens - Kensington']
];
function setMarkers(map, locations) {
var image1 = new google.maps.MarkerImage('amber-spot.png',
new google.maps.Size(30, 36),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var spot = locations[i];
var myLatLng = new google.maps.LatLng(spot[1], spot[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: spot[3],
title: spot[0],
zIndex: spot[4],
html: spot[5]
});
var infowindow = new google.maps.InfoWindow({
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.html);
infowindow.open(map,this);
});
}
}
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 marker2 = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
This is the form for geocoding
<div class="view-content">
<input id="address" type="textbox" value="W1T 4JD">
<input type="button" value="Geocode" onclick="codeAddress()">
<div id="map_canvas" style="width:800px; height:600px;"></div>
I ended up using the proximity postcode filter on the Drupal gmap module to do this. Initially i didn;t think it would work because i wasn't using the gmap modules native map on the View where the filter was being used but i hadn't realised the results would still be in the array that was returned :-).
Lee