How to Add Google Maps to Web Page


Step 3

Add the elements to the <head> tag of the document. In the <head> tag of the web page, add this two lines:

<Meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script>

The Meta tag informs Google how to display the map in the web page. The value initial-scale=1.0 means display the map in full screen, the value user-scalable=no means that the user cannot resize it and the webmaster can change the values if they want.

The script tag is for Google Maps API JavaScript file and it is required to display the map. Here, in the script a variable sensor=false is defined that tells Google that this map is generated using any sensor to determine the users location. Load the map that uses sensor (such as GPS) to determine the reader’s location and display the map and then change the value to true.

Add some settings and define the map on the page. In the <head> tag of the document, add the following script.

<script type=”text/javascript”>
function initialize() {
var latlng = new google.maps.LatLng(40.7562008,-73.9903784);
var myOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions);
}
</script>

  • Change the highlighted portion with correct latitude and longitude numbers.
  • Add the map element to the page

Once the script element is added to the <head> of the document, the user is needed to position the map on the page. Do this by adding <div> tag with the id=”map_canvas” attribute along with width & height for the page.

<div id=”map_canvas_sat” style=”width:275px; height:275px;”></div>

At last, load the script in the <body> tag. On page loading, only if the script runs on the web page, the map will be displayed on the web page. To display map, add this script to the <body> tag:

<body onload=”initialize()”>

Now, the user can upload the page and see the map display.

Step 4

Google map without marker, how do people identify where the exact location is? So, to add a standard red marker in Google maps, add the following to the script below the line var map = …

var myMarker = new google.maps.Marker({
position: latlng,
map: map,
title:”About.com Headquarters”
});

Change the highlighted text to the title the user like to appear when hover over the marker is kept. Many markers can be added to the page by just adding new variables with the new coordinates and titles.

var latlng2 = new google.maps.LatLng(37.3316591,-122.0301778);
var myMarker2 = new google.maps.Marker({
position: latlng2,
map: map,
title:”Apple Computer”
});

+ There are no comments

Add yours