Click For Country
Description
Click For Country is intended to illustrate the ability of the GClientGeocoder object to return the address of a location on a map. To use it, click on the map somewhere and if you click on a land mass, you should see the country name appear below the map.
Further Uses and Ideas:
- Click For Country Game
How it Works
The G_SATELLITE_MAP map type is used because it displays no labels or place names.
//<![CDATA[
var map;
var geocoder;
function initialize()
{
var latlng = new google.maps.LatLng(0,0);
var myOptions = {zoom:2,center:latlng,mapTypeId:google.maps.MapTypeId.SATELLITE,draggableCursor:'crosshair',mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
geocoder = new google.maps.Geocoder();
document.getElementById("message").innerHTML="<p></p>";
google.maps.event.addListener(map, 'click', function(event)
{
codeLatLng(event.latLng)
});
}
function codeLatLng(latlng)
{
geocoder.geocode({'latLng': latlng}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
if (results[0])
{
var cname="";
try
{
for (var j=0;j<results[0].address_components.length;j++)
{
var xty=results[0].address_components[j].types;
if (xty.indexOf('country')!=-1)
{
cname=results[0].address_components[j].long_name;
}
}
var marker=placeMarker(latlng,cname);
marker.setMap(map);
document.getElementById("message").innerHTML="<p align='center' style='color:#FF0000'>Last Country: "+cname+"</p>";
}
catch(err)
{
document.getElementById("message").innerHTML="<p align='center' style='color:#FF0000'>Last Country: [none]</p>";
}
}
}
else
{
document.getElementById("message").innerHTML="<p align='center' style='color:#FF0000'>Geocoder failed due to: " + status+"</p>";
}
});
}
function placeMarker(location,title)
{
var image = new google.maps.MarkerImage('marker.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(9, 33));
var shadow = new google.maps.MarkerImage('shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(28, 22),
new google.maps.Point(0,0),
new google.maps.Point(1, 22));
var marker = new google.maps.Marker({position:location,title:title,map:map,shadow:shadow,icon:image,draggable:true});
return marker;
}
//]]>
Relevant Links
http://www.google.com/apis/maps/
Version History
Version 1 (10/01/08)
Version 1.1 (13/02/2009) - Fixed G_SATELLITE_TYPE is not defined error
Version 1.2 (23/06/2009) - Use var cname=place.AddressDetails.Country.CountryName;
Version 2.0 (04/11/2010) - Implemented Google Maps API V3. Markers retain county name on hover over.
Version 3.0 (18/01/2012) - Impemented google.maps.Geocoder() instead of GClientGeocoder()
Previous Comments For This Page
from where we will download your code.. i am unable to run... actually we need click for state on google map same as click for country. Please help!!!!!
By Gagan on 03/02/2012mapTypeControl has been removed to make things harder!
By Daft Logic on 19/11/2010For some reason it doesn't seem to work when you click on Norway. Neither when you click on lakes or the sea.
By Erlend on 17/08/2009JimBroad, not sure why! I will update (simplify) it. Thanks for the feedback.
By Daft Logic on 23/06/2009Why didn't you just use
var cname=place.AddressDetails.Country.CountryName;
By JimBroad on 03/06/2009thanks!
On 18/06/2008
Add your own comment below and let others know what you think: