Google Map API V3 tutorial

Every one on web know Google map,Best mapping from google .But some know about the google map API and it’s very easy to use.

It’s great news that google released new version of google map API version 3.
The previous version will continue(V3).Nevertheless as a beginner to google map API I recommend Version 3 because it has great added advantage over Version 2 .
Some of the the advantages I noticed include

You need only develop a map it can run on android phones,website,iphone
and speed .
Other advantages we discuss later in this article.

For those who are beginner with google map go with v3 and those who want to switch from v2 this is the best time.because google map is in Labs and when it become full fledged you can go your study parallel.

About the API

Google map API is available to you in javascirpt language .You can integrate it with any of your server side programming like PHP,ASP.net JSP etc .

The previous version of API used a unique key for each user they want to use map in their application


For example if codeglob.blogspot.com want to use google map api v2 we have to sign up for the api using the site url and google account, a unique key is generated for you website.
Things have changed here is the happy news .You don’t need to use a API key for the Map API V3.

How to setup

We already told that MAP api is Javascript API .We need to add reference in our webpage.

<script type=”text/JavaScript” src=”http://maps.google.com/maps/apis/js?sensor=false”>
</script>

By doing this you added the reference to Google map API in your webpage.
Only thing you remember when referencing to google map is setting the sensor parameter

sensor = true/false this tells the map api whether you are using GPS sensor or not .


Next we look at the how we can initialize the map

Map needs a canvas to draw ,ie area in webpage usually used <div>

So create a div and give a id for the div

Eg:

<div id=”map”></div>

inorder to specify the width and height of the div specify a css style in page in style tag or external css file.

<style type=”text/css”>
#map
{
height:300px;
width:300px;
}
</style>

API v3 use JSON (Javascript Object Notation) for creating object .It’s easy when we use javascript object to set values.

Eg: We have an object car and it have some properties like color,tyre,type,make,model etc we can create a Javascript object of car like this

Car
{
color:red;
tyre:4;
make: Hyundai;
model:i-20
};

like this in Map Api uses some javascript objects. To access object property just call it like

alert(Car.color);

Map initialization

Map uses latitude longitude value( a particular point in map) .Setting initial latitude and longitude is like this

var latlng = new google.maps.LatLng(‘latitude value’,’longitude value’);

To initialize map we need to call the contructer of the class Map in Google map API.It takes two arguments one is the canvas that we need to draw the map HTML element .We already told that we setup div named map for showing map. And the second argument is the map otions.Map options is given in the format of JSON. .
So we create a options object having the folloging format
//Properties of the map
Options
{
zoom:16;//map has 0-19 zoom levels
center:latlng;// previously declared Latitide Longitude variable
mapTypeId: google.map.MapTypeId.ROADMAP;// Google map Type
};

Google map Support four types of maps
ROADMAP
HYBRID
SATELITE
TERRAIN

Next we call the constructer by passing the values to initialize the map.

Var map= new maps.google.Map(document.getElementById(‘map’),options);

Then the map is visible to you when you browse the page in browser.

Complete sample code for Google map Initialization

Adding marker and Info Window to the map


var marker= new google.maps.Marker({
position: new google.maps.LatLng(9.099761549253056,76.5246167373657),
title: "Hello Testing",
clickable: true,
map: map
});


var infiwindow = new google.maps.InfoWindow(
{
content: “Hello"

});


google.maps.event.addListener(marker,'mouseover',function(){
infiwindow.open(map,marker);
});
google.maps.event.addListener(marker,'mouseout',function(){
infiwindow.close(map,marker);
});

Here is the sample complete code for this article

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Google Map Test </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize()
{
var latlng = new google.maps.LatLng(9.931544168615512,76.27632894178791);
var opt =
{
center:latlng,
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableAutoPan:false,
navigationControl:true,
navigationControlOptions: {style:google.maps.NavigationControlStyle.SMALL },
mapTypeControl:true,
mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}
};
var map = new google.maps.Map(document.getElementById("map"),opt);
var marker= new google.maps.Marker({
position: new google.maps.LatLng(9.931544168615512,76.27632894178791),
title: "CodeGlobe",
clickable: true,
map: map
});


var infiwindow = new google.maps.InfoWindow(
{
content: " I am here! "

});


google.maps.event.addListener(marker,'mouseover',function(){
infiwindow.open(map,marker);
});
google.maps.event.addListener(marker,'mouseout',function(){
infiwindow.close(map,marker);
});


}
function test(event)
{

alert( event.latLng.lat());
alert(event.latLng.lng());

}
</script>
<style type"text/css">
#map{
width:500px;
height:500px;
float:left;
position:absolute;
left:300px;
top:200px;

}
</style>
</HEAD>

<BODY onload="initialize();">
<div id="map" >

</div>
</BODY>
</HTML>

If you have any problem implementing google map API please mail me: irshadcp at gmail dot com

Zion Dengon 1.0 Beta

Redefine the way of SMS ing...Download.

Zion Dengon is an application that allows you to send messages in two ways
1.Using normal way.
2.Using way2sms account(you need GPRS enabled phone)

The key features and functionalities
1.You can maintain your own contact list and from those contact you can select multiple users and add to your message recipients.
2.It is the modifed version of Zion SMS Mania and combined version of Zion SMS and Zion SMS Mania.
2.You can add your contact member in two ways
a)By using the add contact option
b)By browsing your phone contact
I prefer the first way in this case you just need to enter the name of the person and if his/her number is already in your phone contact you have option to browse that number,and then you can add it to the Zion Dengon contact.
In the second way you don't need to type anything,just select the contact list that exist in your phone shown in the multi selection list,you feel this as more easy but actually it is more time consuming.
Note:Never add all the contacts at a a time(in option b) it will take more time to do and show in list.

For more details contact-email:xpedition009@gmail.com

Enjoy SMS ing..

HTML Form elements array

Creating array of HTML form elements

Array is a collection of similar data elements, means we can use array to store similar elements referenced under a common name.

In web development sometimes we need to group HTML form elements as arrays do. For example, you have a form where user has to select his hobbies from a group of check boxes as given below.









Sample Code

<form action="showlist.php" method="post" name="hobby_frm">
<h3> Select your hobbies </h3>
<input type="checkbox" name="hobbies[]" value="hb1"  />
Reading <br />
<input type="checkbox" name="hobbies[]" value="hb2" />
Surfing <br />
<input type="checkbox" name="hobbies[]" value="hb3" />
Listening to music  <br />
<input type="submit" value="submit" />
</form>

Please notice the name of all checkboxes hobbies[]
The above code will define an array with the name hobbies

Accessing form elements array using JavaScript

Now, let's see how to access the hobbies[] using JavaScript.

<script type="text/javascript">
var hobbies = document.hobby_frm.elements['hobbies[]'];
var str = "Length  : "+hobbies.length+"\n";
for( var i = 0; i < hobbies.length; i++ ) {
str = str + "Hobby "+(i+1)+" : "+hobbies[i].value+"\n";
}
alert(str);
</script>

Handle form elements array in PHP

In PHP, data sent from a form with post method is available in $_POST array.
We can access hobbies[] using the following code.

<?php
$hobbies = $_POST['hobbies']; // use name of the array as key
foreach( $hobbies as $value )
print $value;
?>


courtesey webdevelopment hosting company cochin kerala



Zion Plus-2010(Beta)

Manage text files in your mobile phone in a more flexible manner..Download.

A new release of previous version of Zion Plus..More functionalities and a new look..useful and flexible than the previous version..try it today itself..

Its a Beta version modifications and performance issues will be updated in the coming versions..

An application that allows you to create text files in phone memory and memory card. If you want to create folder in your mobile through this application edit the "directoy" field,shown when you choose save or save as option. for eg: the directory field shows -"file:///e:/folderx/" you can create a folder "NEWFOLDER"in that directory by changing the field by "file:///e/folderx/NEWFOLDER/" You can specify the file name in the filename textbox,default name will be newfile. Help menu to assist you in how to use this application.