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.
<script type="text/javascript">
//<![CDATA[
var geocoder;
// Create a base icon for all of our markers that specifies the
// shadow, icon dimensions, etc.
var Icon=new GIcon(G_DEFAULT_ICON);
Icon.image="http://www.daftlogic.com/images/GMmarkers/stripes.png";
Icon.shadow="http://www.daftlogic.com/images/GMmarkers/shadow.png";
Icon.iconSize=new GSize(20,34);
Icon.shadowSize=new GSize(37,34);
Icon.iconAnchor=new GPoint(9,34);
Icon.infoWindowAnchor=new GPoint(9,2);
Icon.infoShadowAnchor=new GPoint(18,25);
var map = new GMap(document.getElementById("map"));
map.setMapType(G_SATELLITE_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-5.895538330078125, 54.62279178711505), 12);
geocoder = new GClientGeocoder();
// Create a marker whose info window displays the letter corresponding
// to the given index.
GEvent.addListener(map, "click", function(marker, point)
{
if(!marker)
{
showLocationfp(point);
}
});
function createMarker(point, index)
{
// Create a lettered icon for this point using our icon class from above
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var marker = new GMarker(point, Icon);
// Show this markers index in the info window when it is clicked.
var html = "Marker <b>" + index + "</b>";
GEvent.addListener(marker, "click", function()
{
marker.openInfoWindowHtml(html);
});
return marker;
}
// addAddressToMap() is called when the geocoder returns an
// answer. It adds a marker to the map with an open info window
// showing the nicely formatted version of the address and the country code.
function addAddressToMap(response)
{
var texttodisplay;
map.clearOverlays();
if (!response || response.Status.code != 200)
{
texttodisplay="No Country";
}
else
{
place = response.Placemark[0];
if (place.AddressDetails === undefined)
{
texttodisplay="No Country";
}
else
{
var cname=place.AddressDetails.Country.CountryName;
texttodisplay=cname;
}
}
document.getElementById("message").innerHTML="<p align=\'center\' style=\'color:#FF0000\'>"+texttodisplay+"</p>";
}
function showLocation()
{
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap);
}
function showLocationfp(point)
{
var pointasstring=point.lat()+","+point.lng();
geocoder.getLocations(pointasstring, addAddressToMap);
}
//]]>
</script>
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;
Previous Comments For This Page
For 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: