Centering your Google map

Tutorial created by Ray Borduin, WebAssist

Categories: Design Extender

1 ratings | Sign in to rate this tutorial | View comments

next section

What you need to start

1. Pro Maps for Google or Design Extender
   
2. Dreamweaver CS4 or later
   
3. Dreamweaver site defined
   
4. Page with Pro Map inserted

next section

Picking a map object name

First, you need to locate the name of your map object. This is included in the URL you are going to create.

1. Open the page with your map.
   
2. Choose the Code button to enter Code view.
   
3. Locate the line of code that reads something like this:
   

   <script type="text/javascript" src="plugins/plugins/google_javascript/wagmp_map_1.js">/*wagmp*/</script>

   
   
   Take note of the text that is bolded. For this example, this is wagmp_map_1.

next section

Creating the link

The next step is to create the link that will change the focus of the map to a different address.

1. Highlight the following code chunk, and press Ctrl (Cmd) C to copy.
   

   <a href="#" onclick="wagmp_map_1_obj.openWindowByAddress('Address');">Link to map</a>

   
   
2. For older versions of Pro Maps for Google, the text would look as follows:
   

   <a href="#" onclick="wagmp_map_1_obj.getPointByAddress('Address').marker.openInfoWindowHtml(wagmp_map_1_obj.getPointByAddress('Address').address.infowindowtext);">Link to map</a>

   
   
3. Place your cursor in the location within your code that you would like this link to be displayed.
   
4. Press Ctrl (Cmd) V to paste this code.

next section

Modify the link

You will now need to modify some elements in the link you just pasted to work with your map.

1. Modify the two locations where the map object is mentioned, to make sure that this references the map object you found in the first step.
   
2. Replace the two locations where Address is bolded to reference the street address for the marker location you wish th link to focus on.
   Example: If the location I wanted my map to focus on was 8899 University Center Ln, this text would look as follows:
   

   <a href="#" onclick="wagmp_map_1_obj.openWindowByAddress('8899 University Center Ln');">8899 University Center Ln </a>

   
   
3. For older versions of Pro Maps for Google, the text would look as follows:
   

   <a href="#" onclick="wagmp_map_1_obj.getPointByAddress ('8899 University Center Ln').marker.openInfoWindowHtml (wagmp_map_1_obj.getPointByAddress('8899 University Center Ln').address.infowindowtext);">8899 University Center Ln </a>

   
   
4. Press Ctrl (Cmd) S to save your page.
   
5. Preview your page in your browser to test your link.

Editing the wagmp_map file

1. In the wagmp_map_1.js file, change line 26 to read:
   

   return WAMapPoint(this.markers[x],this.addresses[x],this.icons[x], this.points[x], this.obj);

   
   
2. Replace line 13 with the following line of code:
   

   function WAMapPoint(theMarker, theAddress, theIcon, point, map) {

   
   
3. Add this line of code below line 17:
   

   map.setCenter(point, 13);

   
   
4. Press Ctrl (Cmd) S to save your page.
   
5. Preview your page in your browser to test your map.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

1 ratings | Sign in to rate this tutorial