Back to Top
The nuts and bolts for
Creative web development

Google Maps Directions Add-on

“Display the best route with directions!”

Make sure that your users never get lost on your Google maps with the Google Maps Directions Add-on! The extension allows you to add directions to locations, stores, offices or any address in the world. Display the routes with full directions lists and alternative routes visually on Google Maps.

Additionally, when you have multiple markers on your map you can choose to show the shortest route automatically, after the user enters its address in the Ajax AutoComplete control. Starting point, travel mode and a draggable route marker, to change the direction, are only few among the great features packed in the Google Maps Directions Add-on.

If you want to display your maps with directions on a mobile device (iPad/iPhone) they'll perform great thanks to the latest Google API V3!

Google Maps Directions Add-on requires Google Maps and Ajax AutoComplete extensions.

Features

  • Display full directions list - Show every check point of the route.

  • Draggable Route Marker - Change the directions at any point you want by simply dragging the marker on the map.

  • Route Alternatives - Google Maps always have alternative routes. If you wish to display them, check the Provide Route Alternatives checkbox.
 
 
  • Display a full route visually on Google Maps

  • Display a route from the Google Maps marker to address entered with Ajax AutoComplete - this way you can have for example Google map with your office and an Autocomplete control to let the user enter their current address to start the route from.

  • Use Browser Current Location - the Google Maps Direction Add-on can detect if the user browser supports Geo location (most recent browsers do) and if it does it can enter it as start address in the Ajax AutoComplete control.

  • Show the shortest route automatically - when you have a Google Maps with multiple markers in it (for example your different branches) and the user enters its address in the Ajax AutoComplete control, the the route to the closest branch is automatically chosen!
  • iPad/iPhone Support - Thanks to the latest Google API V3 you can use your Google maps with directions on your iPhone/iPad.

  • Directions Panel Size - Choose the size of the panel where the directions will be displayed.

  • Starting Point - Set a location where your direction will start from.

  • Travel mode - Choose the type of transport you need directions for - driving, cycling or walking

  • Unit system - The destination can be displayed in Metric (km) or Imperial (miles)


  • Great Dreamweaver integration - Interactive dialog in Dreamweaver with all the options you'll need.

     
  • An inline property inspector -  The property inspector enables you to change several options after you’ve created the Directions.

  • Fully cross-browser compatible - Runs perfectly on any up-to-date desktop browser as well as mobile devices.

Showcases


  • Restaurant Directions Showcase

    For this showcase we created a search field for directions, using DMXzone Google Maps and its Google Maps Directions Add-on. Also the search term is executed with Ajax Autocomplete, which can be used ...

  • Alabama Car Service Showcase

    In order to get directions to the nearest car service all you need to do is enter you current location in the field.

  • Lux Decor Mobile Showcase

    For this showcase we used DMXzone Lightbox that displays the gallery images, DMXzone Google Maps to show the available locations, Ajax Autocomplete to help you when you type your current location and ...

  • Route Display bundle

    In this showcase you can see how easy it is to search for directions directly in the Google Map. All you need to do is input the start and end point of your journey.

  • From To Directions Showcase

    In this showcase all you need to do is enter your start and ending point in order to get directions. You'll get a full directions list as well as alternative routes.

  • Sofia Sightseeing Showcase

    In this showcase you can explore the power of our Google Maps Directions Add-on for DMXzone Google Maps and Ajax AutoComplete extensions. By entering your current location the maps will provide you ...

  • Find the nearest top tourist attraction demo

    Share your location or insert an adress with Ajax Autocomplete's autofill power and the Google Maps Directions Add-on will sort it out for you in a snap!

  • Weekend in Nature Showcase

    With the help of DMXzone Google Maps, Google Maps Directions Add-on and Ajax AutoComplete you can build up a website and limit the location, where your users can search. In this showcase we will show ...

  • AutoComplete Google Maps Showcase

    Start filling in your address in the 'Address Look Up' field. The Ajax AutoComplete will provide you with a number of options to select from. Once the selection is made the address fields to the ...

  • Google Maps Autocomplete Showcase

    Click on SEARCH and enter Address, Street, Town or Country in the 'Search For' field. Select the entry that is corresponding to your search in the autocomplete list and the Address details will be ...

  • DMXzone Google Maps Behaviors Showcase

    Click on an image to preview the city it refers to on the map with the help of control behaviors.

  • 7 ancient Wonders Showcase

    *You can also preview the showcase on a mobile device (iPhone/iPad, Android, Win 7 Phone or BlackBerry) to see how smooth it runs: http://bit.ly/jI1fYq

Videos

Basic Usage

HTML5 Slideshow VideoDMXzone Google Maps Features Overview
With this movie we will show you the main features of DMXzone Google Maps.

Inserting DMXzone Google Maps on a Page
With this movie we will show you how to insert DMXzone Google Maps on your page.

Creating Dynamic DMXzone Google Maps
With this movie we will show you how to use DMXzone Google Maps with dynamic data.

Watch the movie read more

Control the DMXzone Google Maps with Behaviors
With this movie we will show you how to use the Control Behaviors in order to control the DMXzone Google Maps on your page.

HTML5 Slideshow VideoAuto Show Info Window of any Marker in DMXzone Google Maps
With this movie we will show you how to open the info window of your DMXzone Google Maps markers automatically when the page loads.

Dynamic Usage

Connecting Ajax AutoComplete and DMXzone Google Maps
With this movie we will show you how to connect the Google search autocomplete option in Ajax AutoComplete with DMXzone Google Maps in order to autofill Address Form fields on your page.

Using Google Search option in Ajax AutoComplete
With this movie we will show you how to use the autocomplete from Google search option in Ajax AutoComplete.


Requirements

Type: Behavior
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CS5.5, Dreamweaver CC
Browser: Chrome 9+, iPad, Safari 5+, Firefox 3.6, Firefox 4+, Chrome 10+, Opera 11
Screen Shot: External link
Tags: google maps, directions, extension, Dreamweaver


This Extension Requires:


Ajax AutoComplete

A filtered dropdown with choices after entering a few characters

How many times have you struggled with entering long lists, while you had to lookup a product or country? AJAX AutoComplete will make your life easier. Your users can get a filtered dropdown with choices after entering a few characters, enabling quick search and selection without having to enter long text.They can even autocomplete any address, city, street and country in Google Maps with the Google search automatically. Also you can choose to store the street, city, state, country and even ...

Read More


DMXzone Google Maps

Empower full featured Google Maps in Dreamweaver!

DMXzone Google Maps is a Dreamweaver extension that enables you to 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! Let your visitors browse a dynamic or static map and find what they are looking for as quickly as possible. You can change marker images, show rich tooltips, pan to location and tons of other features all set up in a world featuring ...

Read More

History

Version 1.2.1

  • Full Dreamweaver CC and Extension Manager CC support
  • Improved compatibility with DMXzone Bootstrap
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.2.0

Version 1.1.1

  • Improved integration with dynamic data
  • Improved DW integration
  • Latest jQuery 1.7.2 included
  • Improved installer for for DW CS 5.5+ and Mac DW CS6
  • Fixed setting the zoom value in the control behavior

Version 1.1.0:

  • Compatibility with the DMXzone Google Maps 1.1.0

Version 1.0.1:


  • Improved directions calculation when single marker is used
  • Improved integration with Ajax AutoComplete
  • Improved JavaScript including on Mac OSX

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article