close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Set the zoom level in Pro Maps

Tutorial created by Team WebAssist

rating

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.

arrow downWhat you need to start

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

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

  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:
    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.

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

arrow downApplying 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.
  1. Press Ctrl (Cmd) F to open the Find command.
  2. From the Find in menu, choose Current Document.
  3. From the Search menu, choose Source Code.
  4. In the Find field enter map.addOverlay.
  5. Choose Find All.
  6. From the Search results, double-click on the first result to locate it within the code.
  7. Place your cursor at the end of the current line. This will be after the ;.
  8. Press Enter to create a new line.
  9. Paste the following line:
    map.setZoom(N);

  10. Replace N from the line of code you just pasted, with the desired zoom level.
  11. Enter a number from 0 to 17 to specify the desired zoom.
  12. Paste the same line of code for all of the results that are displayed in the Search results panel.
  13. Press Ctrl (Cmd) S to save your changes.
  14. Return to the page that contains your map.
  15. Press F12 to preview your page in your browser.

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
rating

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

Content

rating

Layout

rating

Ease of use

rating

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.