Table of contents Table of contents... 1 About... 2 Features in Detail... 3 The Basics: Inserting Google Maps on a Page... 20 Advanced: Control Google Maps with Behaviors... 27 Advanced: Track Your Current Position on the Map... 36 Advanced: Using with Dynamic Data... 47 Video: Inserting Google Maps on a Page... 55 Video: Control Google Maps with Behaviors... 55 Video: Track Your Current Position on the Map... 55 Video: Using with Dynamic Data... 55 Page 1 of 55
About Unleash the power of Google Maps in just a few clicks. Add markers to cities, addresses, businesses and events with info balloons on interactive, annotated maps and integrate them in your websites! Choose addresses and Geo locations from any feed but also from HTML5 Data Bindings data source and Database Connector PHP/ASP. Let your visitors browse a dynamic or static map and find what they are looking for as quickly as possible. Enable dynamic tracking and positioning with HTML5 Geo Location so that you can dynamically adjust the center point of the map on which the viewport will be centered. Change marker images, show rich tooltips, pan to location and tons of other actions, using Google Maps 2 control behaviors. These are just a few of the amazing features that you ll find in this Dreamweaver tool. Page 2 of 55
Features in Detail Full integration with HTML5 Data Bindings and Database Connector - Choose addresses and Geo locations from any feed but also from HTML5 Data Bindings data source with the help of Database Connector PHP/ASP. Page 3 of 55
Automatic markers updates with HTML5 Data Bindings - Now when you bind your markers to a HTML5 Data Binding and the data refreshes then all the markers get updated automatically. Page 4 of 55
Automatic map center positioning with HTML5 Data Bindings - When you use a data binding as map center address, then when its data changes the map is automatically centered to the new address. Page 5 of 55
Real time data updates for static markers with HTML5 Data Bindings - Even if you choose to use static markers list, but bind some of the markers properties to HTML5 Data Bindings, when these properties change the marker gets automatically updated! Page 6 of 55
Dynamic tracking and positioning with HTML5 Geo Location - Using HTML5 Geo Location picker you can dynamically adjust the center point of the map on which the viewport will be centered. Page 7 of 55
Full support for the latest Google Maps API V3 - It loads super-fast, especially on mobile browsers such as Android-based devices and the iphone. Page 8 of 55
Multiple markers with custom icons - Place as many markers as you need on your website and also use custom designed icons. Page 9 of 55
Static Maps - Embed a fast and simple Google Maps image in your web page or mobile site without requiring JavaScript or any dynamic page loading. Just enter as many markers for the addresses as you wish to display. Page 10 of 55
Dynamic Maps - Add markers to your Google Maps dynamically! Choose your addresses or Geo locations from any recordset or other data sources such as HTML5 Data Bindings and HTML5 Geo Location. Page 11 of 55
Special ios support for touch and zoom - Whit the latest API V3 the is especially designed for mobile devices as well as for desktop browsers. Page 12 of 55
Real-time preview in Dreamweaver - You can see a preview of your Google Maps directly in Dreamweaver Live View. Page 13 of 55
Zoomable Maps - Define the resolution of the current view from 1(the lowest zoom level, in which the entire world can be seen on one map) to 19. You can also choose fit to make the map auto determine the best zoom level so that all markers are visible. Page 14 of 55
Convert address to Geo location - Convert a street addresses or other locations (ZIP codes, postal codes, city & state, airport IATA/ICAO codes, etc.) to latitude and longitude, which can be entered into a GPS device or geographical software. Geo Location is always preferred due to limits in Google API when decoding multiple addresses at once. Position marker by latitude/longitude as well as by its address - Enter the latitude and longitude for places that can not be entered by address or name. Page 15 of 55
Add title and description for you markers - Full support for rich HTML info windows. Different map types - Choose between roadmap, satellite, hybrid (labels) or terrain for your default opening maps. Page 16 of 55
Street View - Enable the Street view to explore places around the world through 360-degree streetlevel imagery. Keyboard shortcuts support for navigation - Google Maps can also be navigated by using keyboard shortcuts to move the map and zoom in and out. Page 17 of 55
Fully controllable by behaviors - The available actions are: add/remove marker, pan to location, set center location, pan by distance, set zoom or set map type, and more. Page 18 of 55
Before you begin Make sure to setup your site in Dreamweaver first before creating a page. If you don t know how to do that please read this. Installing the extension Read the tutorial at http://www.dmxzone.com/go/4671/how-to-install-extensions-from-dmxzone/ Login, download the product, and look up your serial at http://www.dmxzone.com/user/products Get the latest Extension Manager at http://www.dmxzone.com/go/22670/dmxzone-extension-manager-for-dreamweaver Open Extension Manager and go to your Purchased products tab and click install. If you have a subscription, the extension is to be found and installed in the Explore tab. Get the latest extension manager from Adobe at http://www.adobe.com/exchange/em_download/ Open the.zxp file if you re using Dreamweaver CC or the.mxp file for Dreamweaver CS+ with Adobe Extension manager and install the extension. If you experience any problems contact our Live Support! Page 19 of 55
The Basics: Inserting Google Maps on a Page In this tutorial we will show you how to insert on your page. *You can also check out the video. Page 20 of 55
How to do it 1. Click the Google Maps icon and the UI dialog will appear. Page 21 of 55
2. Set the maps width and height (1) and give your map a name (2). Page 22 of 55
3. In order to add a location click the pin (1) and add an address or latitude/longitude for it (2). If you want, you can add title and description, which can be also HTML driven (3). Page 23 of 55
4. For the map you can choose between the added markers or use a custom one by entering the link in the image field. In this case we will use a default one. Page 24 of 55
5. In the Advanced settings we ll set 18 for zoom for our map (1), using the Roadmap for the map type (2). Page 25 of 55
6. Now, you can save your work and preview the result in your browser. Page 26 of 55
Advanced: Control Google Maps with Behaviors In this tutorial we will show you how to use the control behaviors in order to control the Google Maps 2 on your page. *You can also check out the video. Page 27 of 55
How to do it 1. We ve already added Google Maps to our page. Now, we are going to use the four links to control our map: pan to location, change zoom level and change map type. Page 28 of 55
2. Select the link you want to add the behavior to. Click the Add behavior button (1), select the menu item (2) and click the Control Google Maps (3). Page 29 of 55
3. The Control Google maps window opens. Select the Pan to Location action from the menu (1) add an address (2) that you want to pan to when the link is clicked and click OK (3). Page 30 of 55
4. Now we are going to add the next behavior: Set Zoom Level. Again open the Control Google Maps window following steps 1, 2 and 3. Page 31 of 55
5. Select the Set zoom action from the dropdown menu (1) add the zoom level (2) and click OK (3). Page 32 of 55
6. Finally, we re going to add our third behavior for this link: Set Map Type from the Control Google Maps Window. Page 33 of 55
7. Select the Set map type action from the dropdown menu (1), choose Hybrid map type (2) and click OK (3). Page 34 of 55
8. We do the same for the other 3 links. Now, you can save your work and preview the result in a browser. Page 35 of 55
Advanced: Track Your Current Position on the Map In this tutorial we will show you how to track your current position on the map using and HTML5 Geo Location. *You can also check out the video. Page 36 of 55
How to do it 1. We are going to use the HTML5 Geo Location extension to track our position and Google Maps 2 to display it on the map. First, open the insert panel (1) and select the HTML5 Geo Location icon, which is located in menu (2). Page 37 of 55
2. The HTML5 Geo Location dialog appears and you can customize its options. We enable the high accuracy (1) and continuous tracking (2) options. Also we set the timeout to 5 seconds (3) and maximum age to 0 as we don t want to use cached position (4). When you re done click OK to apply the setting on your page. Page 38 of 55
3. Let s insert the map on our page. Select Google Maps (2) from the insert menu (1). Page 39 of 55
4. Setup the map width and height (1). First, we are going to add a marker (2) that displays our current location on the map. Click the HTML5 Data Bindings value button located next to the latitude field (3). Page 40 of 55
5. Expand the Geo Location list in the field pickup dialog (1), select the latitude binding (2) and click OK (3). Page 41 of 55
6. We do the same for the longitude. Page 42 of 55
7. Add a title (1) for this marker and switch to the advanced settings (2). Page 43 of 55
8. Here, we are going to setup the map center to follow our location and update according to it. We use the HTML5 Geo Location latitude and longitude bindings for the center point of the map. Page 44 of 55
9. Now the map will be centered to our current location. You can apply the settings now. Page 45 of 55
10. Now, you can save your work and preview the results. Page 46 of 55
Advanced: Using with Dynamic Data In this tutorial we will show you how to use with dynamic data, coming from HTML5 Data Bindings data source. *You can also check out the video. Page 47 of 55
How to do it 1. We created a database source. Our database table contains information about restaurants geo coordinates name and description. We want to use this database source to display the restaurants on the map. Open the insert panel (1) and click the Google Maps icon (2). Page 48 of 55
2. Select dynamic markers source radio button (1) and your data source (2). Then we select the repeating element of our data source (3). Page 49 of 55
3. We select the data repeating element of our data source (1) and click the OK button (2). Page 50 of 55
4. Our restaurant locations are stored using their geo coordinates - latitude and longitude. Let s select the latitude data element. Page 51 of 55
5. It is located inside the repeating element of our data source. Select latitude (1) and click OK (2). Page 52 of 55
6. We do the same with the longitude data element as well as title and description. Page 53 of 55
7. Click the OK button, when you are done customizing your map. Now, you can save your work and preview the results. Page 54 of 55
Video: Inserting Google Maps on a Page With this movie we will show you how to insert on your page. Video: Control Google Maps with Behaviors With this movie we will show you how to use the control behaviors in order to control the on your page. Video: Track Your Current Position on the Map With this movie we will show you how to track your current position on the map using and HTML5 Geo Location. Video: Using with Dynamic Data With this movie we will show you how to use with dynamic data, coming from HTML5 Data Bindings data source. Page 55 of 55