Scribd
Upload
17 views2 pages

Final LabEx2

This document provides instructions for creating a Google Maps API map embedded in a web page. It describes: 1) Loading the Google Maps JavaScript API 2) Creating a <div> container element to hold the map 3) Defining map options like center, zoom level and map type 4) Instantiating a map object, passing the container and options 5) Calling a loadMap function to render the map on page load

Uploaded by

Janette Ambito
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views2 pages

Final LabEx2

This document provides instructions for creating a Google Maps API map embedded in a web page. It describes: 1) Loading the Google Maps JavaScript API 2) Creating a <div> container element to hold the map 3) Defining map options like center, zoom level and map type 4) Instantiating a map object, passing the container and options 5) Calling a loadMap function to render the map on page load

Uploaded by

Janette Ambito
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Using Web Services

1. Create a skeleton HTML and name it as exercise7.html


2. Load or include the Google Maps API using the script tag inside the <head> tags

<script src = "https://maps.googleapis.com/maps/api/js"></script>

3. To hold the map, create a container element using the <div> tag (a generic container).
Create a container element and define its dimensions as shown below:
<div id = "sample" style = "width:1024px; height:600px;"></div>

4. Before initializing the map, create a mapOptions object (it is created just like a literal)
and set values for map initialization variables. A map has three main options,
namely, centre, zoom, and maptypeid.

centre − Under this property, specify the location where you want to center the map. To
pass the location, create a LatLng object by passing the latitude and longitudes of the
required location to the constructor.

zoom − Under this property, specify the zoom level of the map.

maptypeid− Under this property, specify the type of the map you want.

function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(14.581817760369718,
120.97705338366112),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
}
5. You can create a map by instantiating the JavaScript class called Map. While
instantiating this class, you have to pass an HTML container to hold the map and
the map options for the required map. Create a map object as shown below:
var map = new
google.maps.Map(document.getElementById("sample"),mapOptions);

6. Finally load the map by calling the loadMap() method or by adding DOM listener.
google.maps.event.addDomListener(window, 'load', loadMap);

7. Code should look like this:


Activity Sheet 07

8. Double click the HTML file. When the browser opens, the output
should look like this:

You might also like