First, Add Elements to the <head> of Your Document
Open your web page and add the following two lines to the <head> of your document.
<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 tells Google how to display the map. The value initial-scale=1.0 means that the map should be displayed full screen. The value user-scalable=no means that the user cannot resize it. You can change these values if you like.
The script tag points to the Google Maps API JavaScript file. This is required to display your map. The script takes one variable sensor=false. The false value tells Google that this map is not generated using any sensor to determine the user's location. If you load a map that uses a sensor (such as a GPS) to determine the reader's location and display the map, you must change this value to "true".
But you need to do more than just install the Maps API, you need to also add some settings and define your map on the page. In the <head> of your 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 to the latitude and longitude numbers you got in the previous step.
The settings are:
- zoom - this is a required setting that tells Google the initial zoom level. The smaller the number the further out the zoom level is.
- center - this is a required setting that tells Google to center the map on the latitude and longitude you specified.
- mapTypeId - this is a required setting that tells Google what type of map to display. Your options are "ROADMAP", "SATELLITE", "HYBRID", and "TERRAIN"
You can learn more about other map options on the Google Code site.
Second, Add the Map Element to Your Page
Once you have all the script elements added to the <head> of your document, you need to position your map on the page. You do this by adding a <div> with the id="map_canvas" attribute. I recommend you also style this div with the width and height that will fit on your page:
<div id="map_canvas_sat" style="width:300px; height:300px;"></div>Finally, Load the Script in the <body> Tag
The last thing you need to do to get your map to display is to run the script when the browser loads the page. Add this to your <body> tag:
<body onload="initialize()">Then upload your page and see your map display. Here is an example of a Google map on the page. Note, because of the way the About.com CMS works, you have to click a link to get the map to appear. This will not be the case on your page.
