No products selected.
DW Extensions
Free Tools
Another Resources
Product Info
Demo / Video / Faq
Instant Download
(5% surcharge applies):
Google Checkout: The instructions for accessing your purchase will appear in a yellow box at the top of your Google Checkout Order Receipt page. You will get a personal download link, a copy of your donwload link will be sent to the email address used for payment.
Paypal: You will return from Paypal to a direct download page. A copy of your personal donwload link will be sent to the email address used for payment.
In both cases be sure to check your spam/bulk mail folder.
Google Maps Inserter
Google Maps Inserter is a Dreamweaver extension that allows easily inserting and editing Google Maps into your web pages, including the option of adding multiple markers to the map to remark places.
FEATURES
The main features are:
- Allows to add and edit multiple Google Maps, even on the same webpage;
- Includes several configuration parameters (see screenshots below);
- Allows to enable and configure the Google Maps controls for selecting the map type, navigation and scale;
- Allows to include the traffic, bicycling and Panoramio layers (Panoramio is useful to show photos posted by Internet users over the map, see samples for more details);
- Doesn't need a Google API Key. No previous registration is required. Uses the most modern Google Maps API.
- Allows to place multiple markers over the map;
- Each marker can have an info-window with information (editable) about the place;
- Several configuration options for the markers (position, title, icons, info-window and events);
- 100% visual adding and editing from Dreamweaver;
Technical note: This tool uses the Google Maps API version 3, so it doesn't need a Google API Key: all the process can be made in a single step from your Dreamweaver menu and the code will work on any webpage.
DEMO
This basic demo is a map with two markers. Each marker has a different icon. One of the markers appears with the info-window opened; click the other marker to open its info-window panel:
This demo shows the use of the Panoramio and traffic layers over a roadmap view:
This demo shows the bicycling layer over a roadmap view:
The above are just three samples, you can create other different configurations with this Google Maps Inserter.
REQUIREMENTS
The only requirement is Dreamweaver MX (6) or later version (MX, MX 2004, DW 8, CS3, CS4, CS5, ...).
Note: This Google Maps Inserter doesn't add new files to your website, making it easier to use and update. A fragment of code is placed into your webpage. If you are using Dreamweaver templates then your template should have an editable region in the <head>...</head> section of the page in order to be able to automatically place the required code there.
INSTALLATION
To install the extension in your Dreamweaver, double-click the downloaded ".MXP" file. This action will load the Adobe Extension Manager and will install the extension.
If the Adobe Extension Manager is not automatically loaded, then start it manually and use the option "File >> Install Extension" to install the downloaded .MXP file.
After this step, restart Dreamweaver and you will find the option "Insert Google Maps" in the Dreamweaver's menu "Commands".
Use
Open the page where you want to insert your Google Map and click into the page the exact location where you want it to appear; then go to the Dreamweaver menu "Commands" > "Insert Google Maps"; the following window will be displayed:
The setup fields of this window are:
- Select Map: Select here the existent map that you want to edit or select "Insert New Map into this page" to insert a new map.
- Basic Configuration:
- Width and Height: The map width and height in pixels, percent, em or ex
- Latitude and Longitude: The coordinates used to center the map. You can use the button "Lat&Lng Coordinates Helper" or use this free tool to know the coordinates of the desired point.
- Zoom: The initial zoom level for the map.
- Map Type: The map type, for example roadmap, satellite, hybrid or terrain.
- Layers (Traffic, Bicycling and Panoramio): The traffic layer adds real-time traffic information where available. The bicycling layer adds a layer of bike paths, suggested bike routes and other useful information for cyclists. The Panoramio layer shows geo-tagged photos from Panoramio on the map
- User Controls: Enable and disable various user controls like the keyboars shortcuts, the drag-map feature and the double-click zoom.
- Main Controls:
- Map Type Controls: Enable/disable the map type control. Allows to specify the type of control (default, horizontal bar or dropdown menu) and its position.
- Navigation Controls: Enable/disable the navigation control. Allows to specify the type of control (default, small, zoom or android) and its position.
- Scale Controls: Enable/disable the scale control. Allows to specify the control position.
- Markers:
- Initially a list of the current markers is shown, including two buttons to add new markers or delete markers. For your convenience a sample marker is created by default, you are free to delete it.
- Latitude and Longitude: The coordinates used to place the marker. You can use the button "Lat&Lng Coordinates Helper" or use this free tool to know the coordinates of the desired point.
- Title: The hint shown over the maker with you place the mouse over it.
- Icon URL: Optional parameter. You can specify here which icon you wish for your marker. Leave this field empty to use the default Google Maps marker. You can access to sets of free marker icons by using the button "Google Maps Marker Icons".
- Icon Shadow URL: Optional parameter. You can specify here the shadow image for the marker icon. Leave this field empty to use the default shadow if available. You can access to sets of free marker shadows by using the button "Google Maps Marker Icons".
- Info Window Text: Optionally you can display a floating dialog over the map with information about the place marked. This text can be an HTML, including images and links.
- Icon clickable: Indicates if the marker can be clicked.
- Info-window event: Indicates when to show the info window, for example: "Info always open" to specify that the map will be loaded with the info-window being shown (can be closed later with the close [x] button), "Show info on mouse click" to show the info-window when the marker icon is clicked and "Show info on mouseover" to show the info-window when the mouse is moved over the marker icon.
Finally click the "Ok" button to insert/update the maps on your webpage.
Note: In most Dreamweaver configurations some yellow icons or an (apparently) empty layer will appear where the map was inserted. Note that Dreamweaver won't preview the Google Map since Dreamweaver doesn't execute javascripts. To see the Google Map open the page in a browser.
As you can see the process is quite simple. We still recommend watching the video tutorial for a detailed sample. If you need further assistance you can contact our support service. Additionally if you need a custom solution using Google Maps you can also request a quote for a custom coding service.
Instant Download
(5% surcharge applies):
$14.99
Google Checkout: The instructions for accessing your purchase will appear in a yellow box at the top of your Google Checkout Order Receipt page. You will get a personal download link, a copy of your donwload link will be sent to the email address used for payment.
Paypal: You will return from Paypal to a direct download page. A copy of your personal donwload link will be sent to the email address used for payment.
In both cases be sure to check your spam/bulk mail folder.
