Prerequisites: You need very basic knowledge of the following:
- HTML
- JavaScript
Step 1. Create Page: Create a new HTML page in your favorite text editor or HTML page. The page will roughly contain the following text (You can better copy these lines to a text file and save it with .htm or .html extension):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>My Location</title>
</head>
<body>
</body>
</html>
2 min.
Step 2. Add Canvas: Add a <div> tag inside the
<body> where the map will be displayed and give it an id (e.g. canvas in
the following example)
<body>
<div id="canvas" style="height: 400px; width: 400px;"></div>
</body>
2 min.
Step3. Reference maps API: Add the following <script> tag just under <title> tag. This line will set a reference to JavaScript API libraries provided by google.<script type="text/javascript" src="http://www.google.com/jsapi"></script>
1 min.
Step4. Create Map: Load API library and initialize the map in a <script> tag inside <head> tag (or copy & paste the following lines of code).
<script type="text/javascript">
function initialize() {
/* give a default zoom level*/
var zoom = 8;
/*default center of the map*/
var latlng = new google.maps.LatLng(49.008054, 8.388969);
/* get the your location with geocoding */
var location;
if (google.loader.ClientLocation) {
latlng = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
/* Build a text of the location to display */
location = "Latitude: " + google.loader.ClientLocation.latitude + "<br/>";
location += "Longitude: " + google.loader.ClientLocation.longitude + "<br/>";
location += "City: " + google.loader.ClientLocation.address.city + "<br/>";
if (google.loader.ClientLocation.address.region)
location += "Region: " + google.loader.ClientLocation.address.region + "<br/>";
location += "Country: " + google.loader.ClientLocation.address.country;
}
/* Options for the map*/
var myOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
/* Create the map on the canvas */
var map = new google.maps.Map(document.getElementById("canvas"), myOptions);
/* Create an info window to display the location text */
var infowindow = new google.maps.InfoWindow({
content: location
});
/* Create a default balloon marker at your location */
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"My Location"
});
/* Display the location text when marker is clicked */
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
5 min.
Browse and download the complete HTML page from here. Click the balloon on the following map to see your current location.
There are a lot of tutorials, samples and demos available at the Google Maps API web site.
Posts
Great work!! keep it up.
ReplyDelete