Integrate Google Maps in your Webpage.

hi all,

In this article, i will show you, how we can integrate 
Google maps into our web pages,

here, basically integrating Google maps is like a front end part, i.e., on the UI page, it can be done by using simple Java script.

Firstly, in order to integrate Google Maps into your web page,
you have to get a Google map API key(required for earlier API'S before Version 3),

But, for Google map API Version above 3, you no need to get an API Key,

you can integrate a Google map, into our web page just by adding below scripts into your head section of the web page,

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

For getting basic idea of how to integrate, get API key, what type of map to integrate(i.e.,ROAD MAP, etc.,) just click here

after checking the above link, you will get an idea of how to integrate a Google map into our web pages,
 
After adding the above script, add the below code as well to integrate a simple map,

<script type="text/javascript">

//The map object
var map;
//Longitude of the center point
var longt = 80.683594;
//Latitude of the center point
var lat = 19.890723;

//initialize the google map
function initialize()
{
//Options for the map object
var myOptions =
{
zoom: 5,
draggable: true,
center: new google.maps.LatLng(lat, longt),
streetViewControl:false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

//create the map object
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
}

//show the map in the web page
google.maps.event.addDomListener(window, 'load', initialize);

</script>


and with the above code as well, in the body section, add the below code,


<div id="map_canvas" style="width: 100%; height: 800px;"></div>


Now you can a see your Google map Integrated in your web page.

the above map, just gives a glimpse of India,

You can change your lat-long positions, zoom levels, the type of map you need, etc.,

so, this is the way how, you can integrate a simple Google map into your web page.

Not only Integration, with Google maps we can do lot of things,
add markers, create locations on the map, etc.,

Any comments, updates will be thankful to update myself and the blog..

thanks
Shaik Shameer ali

Redirect a webpage depending on device?

Hi all,

This article is to redirect a web page depending on the device, your are accessing the web page..

this redirection can be done using the UserAgent of the device,
The user agent of your device(desktop,Laptop,Ipad,etc.,) can be known from here

this is a simple java script method that will check the useragent of the device..

Simply put the below code in tour head tag of your web page..

<script type="text/javascript">

  if ( (navigator.userAgent.indexOf('iPad') != -1) ) {
    document.location = "http://www.apple.com/ipad/";
  }
else   if ( (navigator.userAgent.indexOf('iPod') != -1) ) {
    document.location = "http://www.apple.com/ipod/";
  }
else if ( (navigator.userAgent.indexOf('iPhone') != -1) ) {
    document.location = "http://www.apple.com/iphone/";
  }
else if ( (navigator.userAgent.indexOf('Windows') != -1) ) {
    document.location = "http://www.microsoft.com/";
  }

</script>

here, By using we can redirect to any web page depending on the device, for example you can see the bank sites, where if you request a bank site via mobile, the website will be of different format, that is done by the same User agent..

thanks
shameer ali shaik