Creating Google map and adding markers ans polyline on it

save this as map.html

this is used to show the google map.

replace URAPIKEY with the the APIIKEY Get while you register on the http://code.google.com/apis/maps/signup.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=URAPIKEY"
<script type="text/javascript">


function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl())
map.setCenter(new GLatLng(9.9798480,76.5738070), 8);

var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;

// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
// save the info we need to use later for the side_bar
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the side_bar html
return marker;

// This function picks up the click and opens the corresponding info window
function myclick(i) {

// Read the data from example4.xml

var request = GXmlHttp.create();
request.open("GET", "map.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = GXml.parse(request.responseText);
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("marker");

for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
// put the assembled side_bar_html contents into the side_bar div
//document.getElementById("side_bar").innerHTML = side_bar_html;

// ========= Now process the polylines ===========
var lines = xmlDoc.documentElement.getElementsByTagName("line");
// read each line
for (var a = 0; a < lines.length; a++) {
// get any line attributes
var colour = lines[a].getAttribute("colour");
var width = parseFloat(lines[a].getAttribute("width"));
// read each point on that line
var points = lines[a].getElementsByTagName("point");
var pts = [];
for (var i = 0; i < points.length; i++) {
pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
map.addOverlay(new GPolyline(pts,colour,width));
// ================================================


<body onload="load()" onunload="GUnload()">
<div id="map" style="width:800px;height:500px"></div>

save map.xml.
this is used to show the markers and polilines . we need to the specify the markers line points

<marker lat="9.9396253" lng="76.2594981" html="Cochin http://phpqa.blogspot.com"/>
<marker lat="9.9798480" lng="76.5738070" html="Muvattupuzha http://phpqa.blogspot.com"/>
<marker lat="9.5864460" lng="76.5217970" html="Kottayam http://phpqa.blogspot.com"/>
<marker lat="8.9973910" lng="76.7756730" html="Kottarakkara http://phpqa.blogspot.com"/>
<marker lat="8.5036960" lng="76.9521870" html="Trivandrum http://phpqa.blogspot.com"/>

<line colour="#008800" width="8" html="You clicked the green polyline">
<point lat="9.9396253" lng="76.2594981"/>
<point lat="9.9798480" lng="76.5738070"/>
<point lat="9.5864460" lng="76.5217970"/>
<point lat="8.9973910" lng="76.7756730"/>
<point lat="8.5036960" lng="76.9521870"/>


Enjoy Google mapping LOL :)


Post a Comment

Please put your comments here. your questions, your suggestions, also what went wrong with me.