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_TYPE 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_TYPE);
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;
}
function convertcodetoname(code)
{
var name;
for (i=0;i<=countries.length-1;i++)
{
var country=countries[i];
if (country[0]==code)
{
name=country[1];
}
}
return (name);
}
// 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=convertcodetoname(place.AddressDetails.Country.CountryNameCode);
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)
Previous Comments For This Page
thanks!
On 18/06/2008
Add your own comment below and let others know what you think: