<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>www.easterngeek.com - Custom Map Demo by Chein</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<!--
Custom Map Demo by Chein www.easterngeek.com
-->

<!--
IMPORTANT!!
replace KEY below with your own key. Everything after key= until before the closing blockquote (")
-->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAADp6cH6COFdv8l5cH_JuBMhS-eXW-FPH1CVlSll9vtii0Rdce0RSPBJvldbys5W_TxTV9EI9sWmYqmg" type="text/javascript">
</script>
<script type="text/javascript">

<!--

var map;
// I have 5 layers, so i defined 5 variables, one for each layers.
var layer1;
var layer2;
var layer3;
var layer4;
var layer5;

//The function that initializes the map. The size of the Map will be size of it's container that is defined in the last few lines of this codes
//I center the map to my neighborhood, coordinate 3.055, 101.69
//Zoom level is 15. The higher the value, the closer the map is zoomed in.
//I used G_HYBRID_MAP to show satellite imagery of the area as default
function initialize() {
map = new GMap2(document.getElementById("map_canvas"),{googleBarOptions:{showOnLoad:true}});
map.setCenter(new GLatLng(3.055, 101.69), 15);
map.setUIToDefault();
map.enableGoogleBar();
map.setMapType(G_HYBRID_MAP);
}

// Function to toggle a layer ON and OFF
// 5 Layers therefore 5 case switch
function boxclick(box,num)
{

switch (num)
{
case 1:
if (box.checked)
// The location where the KML file is stored online. Change the URL to point to your own KML
{ layer1 = new GGeoXml("http://www.fileden.com/files/2010/4/3/2815494/Places_of_interest.kml");
map.addOverlay(layer1);
}
else
{
map.removeOverlay(layer1);
}
break;

case 2:
if (box.checked)
// The location where the KML file is stored online. Change the URL to point to your own KML
{ layer2 = new GGeoXml("http://www.fileden.com/files/2010/4/3/2815494/Parks.kml");
map.addOverlay(layer2);
}
else
{
map.removeOverlay(layer2);
}
break;

case 3:
if (box.checked)
// The location where the KML file is stored online. Change the URL to point to your own KML
{ layer3 = new GGeoXml("http://www.fileden.com/files/2010/4/3/2815494/Jogging_path.kml");
map.addOverlay(layer3);
}
else
{
map.removeOverlay(layer3);
}
break;

case 4:
if (box.checked)
// The location where the KML file is stored online. Change the URL to point to your own KML
{ layer4 = new GGeoXml("http://www.fileden.com/files/2010/4/3/2815494/Fastfood_outlet.kml");
map.addOverlay(layer4);
}
else
{
map.removeOverlay(layer4);
}
break;

case 5:
if (box.checked)
// The location where the KML file is stored online. Change the URL to point to your own KML
{ layer5 = new GGeoXml("http://www.fileden.com/files/2010/4/3/2815494/Fastfood_delivery_coverage.kml");
map.addOverlay(layer5);
}
else
{
map.removeOverlay(layer5);
}
break;
default:
}
}
//-->
</script>

<!-- In your blog ie Blogger etc, you can't really fiddle with the BODY tag, this is a workaround.
Load an image, any image for that matter. Upon loading the image, the function that initializes the Map is called
-->
<img alt="Custom Map - Demo" height="40" onload="initialize()" src="http://i745.photobucket.com/albums/xx93/easterngeek/custom_map_demo-1.png" width="200" />
<br/>
If the map does not automatically load. Click <a href="#" onClick="initialize()">here</a>


<!-- Define a table with 1 column and 2 rows. Row 1 is where the checkboxes are placed. Row 2 is where the Map is placed -->
<table border="1" height="500" style="width: 450px;"><tbody>
<tr> <td height="100" width="450">

<!-- The HTML code for displaying the checkboxes, and what function to call when each checkbox is clicked-->
<form action="" method="post" name="form1">
<input name="checkbox" onclick="boxclick(this,1)" type="checkbox" value="checkbox" />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small;">Places of interest</span>
<input name="checkbox" onclick="boxclick(this,2)" type="checkbox" value="checkbox" />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small;">Parks and Fields</span>
<input name="checkbox" onclick="boxclick(this,3)" type="checkbox" value="checkbox" />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small;">Jogging Path</span>
<input name="checkbox" onclick="boxclick(this,4)" type="checkbox" value="checkbox" />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small;">Fastfood Outlet</span>
<input name="checkbox" onclick="boxclick(this,5)" type="checkbox" value="checkbox" />
<span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small;">Fastfood Delivery Coverage</span>
</form>
</td> </tr>
<tr> <td height="400" width="450">
<!-- Row 2, the map container, 400 pixels high and 450 pixels wide, this will be size of the map -->
<div id="map_canvas" style="height: 400px; width: 450px;"></div>
</td> </tr>
</tbody></table>

</body>
</html>
Enjoy the site? All donations are appreciated

Free Text Host is brought to you by Dagon Design
This site contains no adware, spyware, or popups
Questions? Comments?     Privacy Policy     Report abuse here