Web development tutorial

Tutorial created by Ray Borduin, WebAssist

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

Print tutorial
Share this tutorial

Note: This tutorial is for depreciated versions of Google Maps and should no longer be used. The updated version has direct access to the zoom level in the Google Map Dreamweaver interface. Zoom settings are found on page 4 of the interface. Use that instead.

By default your Pro Maps for Google map centers on the default location, at a specific zoom level. With a simple modification to the code, you can customize your map to display at whichever zoom level you choose.

next section

What you need to start

Pro Maps for Google
Dreamweaver CS4 or later.
Dreamweaver site defined
Page with Pro Map inserted

next section

Locate the map include file

The first step is to locate and open the wagmp_map file that is stored in the google_javascript directory. If you have created multiple Google maps in your site, there will be multiple versions of this file. It is important that you modify the correct file.

Open the page with your map.
Choose the Code button to enter Code view.

Locate the line of code that reads something like this:
Static HTML page:

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

Dynamic PHP page:

<script type="text/javascript"> /*wagmp*/ <?php include("google_javascript/wagmp_map_1.php"); ?></script>

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

Open the google_javascript folder.
Open the wagmp_map file that refers to the map you are working with.

Applying the zoom code

Now, by simply inserting a small piece of code, you can specify whatever zoom level you require.

The zoom level options range from 0 to 17, where 0 is the furthest away and 17 is the closest.

Press Ctrl (Cmd) F to open the Find command.
From the Find in menu, choose Current Document.
From the Search menu, choose Source Code.
In the Find field enter map.addOverlay.
Choose Find All.
From the Search results, double-click on the first result to locate it within the code.
Place your cursor at the end of the current line. This will be after the ;.
Press Enter to create a new line.
Paste the following line:
```
map.setZoom(N);
```
Replace N from the line of code you just pasted, with the desired zoom level.
Enter a number from 0 to 17 to specify the desired zoom.
Paste the same line of code for all of the results that are displayed in the Search results panel.
Press Ctrl (Cmd) S to save your changes.
Return to the page that contains your map.
Press F12 to preview your page in your browser.

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.

Sign in to add comments

1 ratings | Sign in to rate this tutorial