Lesson 11 - Google Maps

welcome to Wreamweaver 8

Google Maps

The Google Maps API lets you embed Google Maps in your own web pages with JavaScript. The API provides a number of utilities for manipulating maps (just like on the http://maps.google.com web page) and adding content to the map through a variety of services, allowing you to create robust maps applications on your website.

Go to Google Maps API to get started. Click here to start.
Get your Google Maps API key if you plan to use this on a host. You must have a URL for which the key may be used. Note, that if you are going to run this on your local machine and do not plan to run this on a host then you do not need a key.

Your key will be created and sample code will be generated with your key. Copy your generated html code into Dreamweaver in a new page. The following is the sample code however it will have your valid key. In this case 'ABCD' is just a placeholder. Note, that if you are planning to run this on your local machine then you may remove the reference to the key, 'key=ABCD'.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp; 
            key=ABCD" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
            function load() {
                if (GBrowserIsCompatible()){
                    var map = new GMap2(document.getElementById("map"));
                    map.setCenter(new GLatLng(37.4419, -122.1419), 13);
                }
        //]]>
    </script>
</head>
<body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>

Note, that the id of the <div> tag is 'map', in this case, and must passed to GMap2 because AJAX uses it as the location where it writes the map.

Display it in your browser and you should see the map.
Next, we will add a local search where we will input Peet's and the map will show all in the area. Go to the Services page and scroll down to the Local Search section.

In your code add the following in the load function after the map.setCenter call:

// create a local search control and add it to your map
var lsc = new google.maps.LocalSearch(); 
map.addControl(new google.maps.LocalSearch(),
new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));

In the <head> section add the style and script calls:

<!--  Load the Style Sheets -->
<style type="text/css">
  @import url("http://www.google.com/uds/css/gsearch.css");
  @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
</style>

<!-- Load the Code -->
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0"
        type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js"
        type="text/javascript"></script>

Save the html file with a new name and then display it.
Finally, we will add the buttons that allow for navigation and switching between the different map view modes. In the code section after the map.addControl we are going to add 2 more controls:
```
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
```

This is just a sampling of what can be done with maps. If you just need to create a static map to insert into your page then visit the Google Static Maps API where javascript is not required . Explore Google Static Map APIs and the Google Map APIs to discover more ways of showing a Google Map.