close ad
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Centering your Google map

Tutorial created by Ray Borduin, WebAssist

Categories: Design Extender


With Pro Maps for Google, when you first load your map, it will center the map on the default location that you specified in the Pro Maps for Google wizard. However, you may want to add links to your page that will change which location your map centers on. The following How-To shows you what you need to do to set this up.

arrow downWhat 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

arrow downPicking 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.

arrow downCreating the link

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

This must be a location that is already being displayed on your map. Either a location that is included in the recordset you are using, or a static address you have entered in the Pro Maps for Google wizard.
  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.

arrow downModify 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.

arrow downEditing 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.

arrow downReviews 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.

Sign in to add comments

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question





Ease of use


security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.