Lab4: Introduction to the Google Maps API

 

Getting Started

1. Hello, World
The easiest way to start learning about the Google Maps API is to see a simple example. The following web page displays a map centered on Sydney, New South Wales, Australia:
  
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
		
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>
Even in this simple example, there are a few things to note:
  1. We declare the application as HTML5 using the <!DOCTYPE html> declaration.
  2. We include the Maps API JavaScript using a script tag.
  3. We create a div element named "map_canvas" to hold the Map.
  4. We create a JavaScript object literal to hold a number of map properties.
  5. We write a JavaScript function to create a "map" object.
  6. We initialize the map object from the body tag's onload event.

2. Open Dreamweaver and copy and paste the code above into a new file.
 

3. Save the file as lab4.html.
 

4. Open lab4.html in a web brower.
 

5. Now you really want to read chapter 3 of "Begining Google Maps API 3".

Adding Markers
 

1. Open your lab4.html if necessary
 

2. Change the code inside function initialize() like below.

 
function initialize() {
		  var mylatlng = new google.maps.LatLng(-34.397, 150.644); //lat-long for center of map
        var myOptions = {
          center: mylatlng,
          zoom: 8,
          panControl: true,
		  zoomControl: true,
		  scaleControl: true,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
		 var marker = new google.maps.Marker({
			position:mylatlng, 
			title: "Hello World"
			});
		// To add the marker to the map, call setMap();
		marker.setMap(map);
      }

3. Save the page and test it in your web brower.

 

4. Now, post the map of your hometown to your web-page.

Adding KML layer and Google Fustion Table
 

1. Open your lab4.html if necessary
 

2. Change the code inside function initialize() like below to display your kml or gogole fusion table layer.

 
!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
		
      function initialize() {

      //lat-long for center of map
      //you should adjust to display the center of your data extent

		var mylatlng = new google.maps.LatLng(28.553767,-81.380653); 
        var myOptions = {
          center: mylatlng,
          zoom: 5,
          panControl: true,
		  zoomControl: true,
		  scaleControl: true,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);

		  var marker = new google.maps.Marker({
			position:mylatlng, 
			title: "Hello World"
			});

		// To add the marker to the map, call setMap();
		marker.setMap(map);
		
      // to add kml file
		var kml1 = new google.maps.KmlLayer("http://www.una.edu/faculty/ssim/newurbanism/fl.kml");
		kml1.setMap(map);

		// to add google fustion table layer
      // each fusion table has own ID. You just need to chang ID here.

		layer = new google.maps.FusionTablesLayer(2895470, {suppressInfoWindows: false
			});
		layer.setMap(map);
      	}
    </script>
  </head>


  <body onload="initialize()">
            
    <div id="map_canvas" style="width:80%; height:80%"></div>
    
    
  </body>
</html>

3. Save the page and test it in your web brower.

 

Lab5: Adding a direction tool

 

Getting Started

 
We’ll create a simple html form for the user to write the two addresses. We’ll add two input boxes and a button to the form. When the user presses the “Submit” button, the direction with the two locations will be shown.

 

1. Review this code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myLatLng = new google.maps.LatLng(28.553767,-81.380653);
var myOptions = {
zoom:15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: myLatLng,
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}

function c() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
distance += "<br/>The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;
}
});
}
</script>
</head>
<body onLoad="initialize()">
<div>
<form>
<table width="100%" border="0">
<tr>
<td><h4>Find the direction between two locations</h4></td>
</tr>
</table>

<h5>Starting Address:
<input type="text" id="start" size="50" />
Ending Address: <input type="text" id="end" size="50" />

<input type="button" value="Submit" name="calcRoute" onClick="c()"/>
</h5>
<table width="100%" border="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</form>
</div>
<table width="100%" border="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>

<center><div style="width:100%; height:10%" id="distance_road"></div></center>
<div id="map_canvas" style="float:left;width:70%; height:54%"></div>

<div id="directionsPanel" style="float:right;width:30%;height:10%"></div>
</body>
</html>

 

The Google Maps API Directions Service is a services that calculates directions between two points, origin and destination. This can be done by using an object called DirectionsService. The Google Maps API Directions Service will receive the direction request and return computed results which can be handled easily by using DirectionsRenderer object.

There are a few things to note:
  1. We create direction Servce and Display object.
  2. We create function c() to make direction request object and service route in JavaScript
  3. We create input texts and input button to get user's addresses in HTML tag.
  4. We create three divs to hold distance, map and directions.

2. Open Dreamweaver and copy and paste the code above into a new file.
 

3. Save the file as lab5-direction.html.
 

4. Open lab5-direction.html in a web brower.