Following code is the simple example to include Google Maps in our Applications.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(21.18099395, 72.81892314999999);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("mymap"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
title:"You Are Here Now!!"
});
marker.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="mymap" style="width:1000px; height:500px;"></div>
</body>
</html>
The output of the same is as follows:
Explanation:
To start with with HTML part, we need to define a container to include Google maps in our HTML page. In this example I have taken a div by the name "mymap" as the base container to include Google map. The Height, width or any other css properties of the div can be set as per the requirements.
Now comming to the Javascript section, we need to include the Google Maps source js as follows:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
The new instance of the LatLng is created by taking the values of Latitude and Longitude as the parameters, here I have taken the values of Latitude and longitude of my current location, it could vary as per the location.
Then the options array by the name "myOptions" is initilized, by the following parameters:
- 'zoom' includes the zooming levels of the maps. the more is the zoom level the more we go towards the interior of the location or place.
- 'center' indicates the center most position of the Map, here I have given the parameters as my current location so the specified location will become the center most location.
- 'mapTypeId' here I'm using ROADMAP, other options also includes SATELLITE, HYBRID and TERRAIN.
Thus, the map object is initialized by the above specified parameters and the id of the div container of the HTML page.
Then the marker object is placed in the map at the Latitude and the Longitude position specified with the ToolTip specified (see screenshot) as "You Are Here Now!!".
This was the very basic example, of the Map with the marker, you could have multiple markers, events to the markers, Popups etc, and other multiples things to suit your requirements.
Thats all for now from my end.
Happy Coding!! :-))
~ Mayuri
Best Car pool Android Application Best Car Pool Application Source Code Download Here
Best Social Network Cordova Ionic Application Best Social Networking Source Code Cordova Ioinc Application Download Here
Best Android Application, Android Restaurant System Best Android Restaurant Application Source code download here
Best Android Application Android Chat Source code download Android Chat Source code download
Best Android Quiz Source Code Download Best Android Quiz Source Code Download here
More and Lots of useful Android source codes here Best Android Source codes download here
2 comments:
Hey but how do i fint the Latitude n Longitude of a place?????
Refer to this article,
http://catchmayuri.blogspot.com/2011/05/get-current-location-gps-position-in.html
Post a Comment