Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating a Basic Single-Location Map
Our first Google Maps mashup will be a static map focused on a single location. To generate this map, you have to create three distinct blocks of JavaScript code. One block goes in the <HEAD> section of your document, the next augments the <BODY> tag, and the final block goes into the body of your document where you want the map to appear.
Let’s start with the opening code. Insert the following lines of code between the <HEAD> and </HEAD> lines of your document:
<script src="http://maps.google.com/maps?file=api&v=2&key=APIKEY"
type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(LATITUDE, LONGITUDE), ZOOM);
}
}
//]]>
</script>
In this code, replace APIKEY with the license key Google supplied to you, and replace LATITUDE and LONGITUDE with the precise latitude and longitude coordinates of the location you want to map.
In addition, you want to replace ZOOM with a number from 0 to 17. The smaller the number, the wider the view; to zoom into street level, try a zoom of 13 or larger.
Next, you have to need to edit the <BODY> tag to include the following parameters:
<BODY onload="load()" onunload="GUnload()">
Finally, insert the following line of code into the body of your document, where you want the map to display:
<div id="map" style="width: 500px; height: 300px"></div>
You can play around with this last line of code a bit. For example, you can make the map larger or smaller by using different width and height parameters, or center the map on the page by surrounding it with <CENTER> and </CENTER> tags. It’s your choice in terms of formatting.