Back to Top
The nuts and bolts for
Creative web development

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 the beauty of Google Maps.

DMXzone Google Maps is powered by the miraculous and latest Google Maps API V3 and the extension gives even support for mobile devices, iPhone/iPad, Android, Win 7 Phone and BlackBerry!

DMXzone Google Maps has been discontinued, please get DMXzone Google Maps 2!

Features

  • Support for the latest Google Maps API V3 - It loads fast, especially on mobile browsers such as Android-based devices and the iPhone.

  • Multiple markers with custom icons - Place as many markers as you need on your website and also use custom designed icons.

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

  • Dynamic Maps - Add markers to your Google Maps dynamically! Choose your addresses or Geo locations from any recordset or other data sources such as Feed Genie.



  • Special iOS support for touch and zoom - Whit the latest API V3 the DMXzone Google Maps is especially designed for mobile devices as well as for desktop browsers.


  • Real-time preview in Dreamweaver - You can see a preview of your Google Maps directly in Dreamweaver.

  • Zoomable Maps - Define the resolution of the current view from 0(the lowest zoom level, in which the entire world can be seen on one map) to 21.

  • 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 prefered 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.


  • Info Windows - Full support for rich HTML info windows.

  • Different Map types - Choose between roadmap, satellite, hybrid or terrain for your default opening maps.







  • Street View - Enable the Street view to explore places around the world through 360-degree street-level imagery.

  • Keyboard shortcuts support for navigation - DMXzone Google Maps can also be navigated by using keyboard shortcuts to move the map and zoom in and out.
  • Fully Controllable by behaviors - You want to navigate to add/remove marker, pan to location, set center location, pan by distance, set zoom or set map type, this all can be done with the DMXzone Google Maps behaviors.



  • jQuery support - Works with the latest jQuery 1.4.4




  • 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 Google Map.

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

Showcases


  • Restaurant Location Showcase

    For this showcase we used DMXzone Google Maps to create a contact page for a restaurant which displays its location on Google Maps for better accuracy.

  • Luxury Beach Villa Showcase

    For this showcase we used DMXzone Bootstrap 3 Navigation in order to create a fully responsive navbar, which becomes collapsible when viewed on mobile devices. We also added a fully responsive ...

  • Travel Blog Showcase

    For this showcase we used HTML5 Data Bindings in order to connect to our database where the cities will be stored. From the available form, you can choose a city with the help of Ajax Autocomplete to ...

  • Bio Food Showcase

    For this showcase we used DMXzone Google Maps for the locations and also the HTML5 3D Flipping Gallery for the variety of food images, which also contain additional information on the back, visible ...

  • Restaurant Menu Showcase

    For this showcase we used a few DMXzone extensions in order to create a beautiful restaurant menu. The responsive layout and the content are executed with DMXzone Bootstrap and its Bootstrap Elements ...

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

  • Top Beaches Showcase

    For this showcase we used DMXzone Bootstrap for the responsive layout and DMXzone Bootstrap Elements for the view on the map labels. The images are navigating the DMXzone Google Maps through the ...

  • Travel Agency Destination Page Showcase

    For this showcase we used DMXzone Bootstrap and Bootstrap Elements to design the destination page of our travel agency website. Also we added a location with DMXzone Google Maps.

  • Business Page Showcase

    For this showcase we used the Advanced CSS Animator to animate the different elements and navigation on the page for these stunning effects. Also the location is presented in a DMXzone Google Maps, ...

  • Grand Hotel Contact Showcase

    In this showcase we designed a simple but yet very effective and useful contact page. For the beautiful drop effects we used the Advanced CSS Animator and DMXzone Google Maps for the location.

  • IT Company Website Showcase

    For this showcase we used the HTML5 Slideshow that's connected with the HTML5 Parallax Slider through the behavior connector and both together bring an amazing user experience when browsing the ...

  • Online PayPal Store Template Showcase

    For this showcase we used the Online PayPal Store Template in order to create web merchant for sports equipment, with great product presentation and easy navigation.

  • Responsive Mobile Store Showcase

    In this showcase, we built a web store for smart phones that has a responsive design and is easily navigated even on mobile devices and tablets. The images are previewed in the DMXzone Nivo Slider, ...

  • 3D Artist Portfolio Showcase

    In this showcase we featured the amazing work from the inspiring 3D Artist - Christian Ludmiloff in order to show you a finished Porfolio website, designed with the Portfolio Design Template & ...

  • Uniform with Google Maps Showcase

    For this showcase we used the DMXzone Uniform to design an awesome contact form with a few elements that looks amazingly in any browser and also the DMXzone Google Maps to show the location.

  • Facebook Product Presentation Showcase

    For this showcase we designed a Facebook Product Presentation template with the help of 3 awesome DMXzone extensions. With the Facebook Fan Page we designed our page within Dreamweaver, added the ...

  • Property For Sale Showcase

    For this showcase we used the Universal Responsive Design Template. The CSS customized Universal CSS Navigation Menu serves as a website navigation through the pages and has curved shadow added with ...

  • Yacht For Sale Showcase

    We created a menu with the Universal CSS Navigation Menu. To show the location we used DMXzone Google Maps. With the DMXzone CSS3 Drop Shadows we added various shadow effects: for the menu and the ...

  • Restaurant Website Showcase

    For this showcase page we customized the Universal CSS Navigation Menu through the CSS and added the restaurant location with the help of DMXzone Google Maps.

  • Responsive Mobile Device Template Showcase

    For this showcase page, we supplied the HTML5 Slideshow with awesome images that have title and description, added a DMXzone Google Maps for the office location and customized the CSS of the ...

  • HTML5 3D Flipping Gallery Store Showcase

    For this showcase page we used HTML5 3D Flipping Gallery in order to create a flipping image for the selected product. The trigger is on click and the flip direction is set to right. On the back we ...

  • Full Content Editor Collection Showcase

    For this showcase we enabled all existing Add-ons for the Advanced HTML Editor 3 so you can try the collection functionality online. In order to open the editor use CTRL+SHIFT+2 (username: demo; ...

  • Universal Responsive Design Showcase

    For this showcase we used the already customized Universal CSS Navigation Menu, awesome images to supply the HTML5 Slideshow in the header, great images for the thumbnails and DMXzone Google Maps ...

  • Radio Coverage Showcase

    For this showcase we used 3 tools - DMXzone Google Maps, Drawing Add-on and Universal CSS Navigation Menu. We picked up the place on the map that we need to work on. With the help of the Google Maps ...

  • Miami Real Estate Showcase

    In this showcase we used DMXzone Google Maps in order to present 45 imagery of Miami with some polygons drawn with Gooogle Maps Drawing Add-on in order to separate the different areas.

  • Organize Your Trip Showcase

    In this showcase we added a marker to point the location of our hotel. We used the polygon tool to sketch the different parts of the map and finally we changed the colors for the areas. Thanks to ...

  • Google Maps and Drawing Add-on in Adv HTML Editor 3

    In this showcase you can test live how it feels to use the Google Maps Drawing Add-on directly in your Advanced HTML Editor 3. You can add any shapes or custom directions/objects and once you're ...

  • Pizza Delivery Polygons

    For this showcase we only used the polygon tool in the Google Maps Drawing Add-on to distinguish the time of delivery for the different city areas.

  • Custom Directions with Google Maps Drawing Add-on

    In this showcase we used Google Maps Drawing Add-on's polyline tool in order to draw the cruise route on the map, the polygon tool for the areas and also DMXzone Google Maps for the custom markers.

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

  • Google Maps 45 Degrees View

    For this showcase we added custom buttons to navigate and zoom each city, which we binded with the DMXzone Google Maps through the control DMXzone Google Maps behaviors.

  • Vacation Rentals Showcase

    For this showcase we used Sliding Billboard in order to display details about the available rentals as well as DMXzone Google Maps that shows the locations when clicked on the 'View on map' button.

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

  • Destination Availability Showcase

    In this showcase we used CSS edited and customized Universal CSS Navigation Menu, DMXzone Lightbox that the images are opening in and DMXzone Google Maps that shows the hotel's location. The Ajax ...

  • Sunglasses Store Showcase

    In this showcase we used the new auto zoom and auto center features, packed in the DMXzone Google Maps. If you want to learn how to use the new features you might want to check our our latest video ...

  • Geo Located Images Showcase

    For this showcase we used Flicker public feed (Feed Genie) with Geo location images that are displayed on our DMXzone Google Maps.

  • City Guide - Points of interest demo

    In this showcase you can see how easy it is to navigate your DMXzone Google Maps, binded with behaviors for the DMXzone Accordion. In order to get the exact location on the maps, simply click on the ...

  • City Guide Showcase

    In this showcase you can see how easy it is to create a mobile website with only 2 Dreamweaver extensions. The layout is designed with one of the predefined styles of the Sliding Menu, with custom ...

  • Cafe Showcase

    In this showcase you will see how to show your location into a popup window, using DMXzone Google Maps and DMXzone Lightbox.

  • 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

Dynamic Usage

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.




Showing Dynamic Locations on DMXzone Google Maps


Using DMXzone Google Maps with HTML5 Parallax Slider


Using DMXzone Google Maps Inside DMXzone Tabs


Using DMXzone CSS3 Drop Shadows with Google Maps


Using Google Maps Drawing Add-on


Using Google Maps with Drawing Add-on in Adv HTML Editor 3


Custom Directions with Google Maps Drawing Add-on


Using Auto Zoom, Center and Key Markers in DMXzone Google Maps


City Guide Website with DMXzone Google Maps and Sliding Menu


Show Your Location into a Cool Lightbox Window


Auto Show Info Window of any Marker in DMXzone Google Maps


Creating From - To Directions Page


Google Maps Directions Add-on Features Overview


Inserting Google Maps Directions Add-on on your Page


Show the Shortest Route Automatically using Google Maps Directions Add-on


Connecting Ajax AutoComplete and DMXzone Google Maps


Control the DMXzone Google Maps with Behaviors


Creating Dynamic DMXzone Google Maps


Inserting DMXzone Google Maps on a Page


DMXzone Google Maps Features Overview

Add-ons


Add-ons


Google Maps Drawing Add-on

Sketch anything you want directly in Dreamweaver

Google Maps Drawing Add-on is a fully integrated Drawing Editor and allows you to sketch anything you want directly in Dreamweaver. Just pick the place on the map that you need to work on and start drawing. You can draw directions, different shapes such as rectangles, circles or even polygons to highlight certain parts of the map. You can choose any color, set up opacity and stroke. The Add-on also works greatly in our amazing Advanced HTML Editor 3, where you have all its ...

Read More


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

Read More

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+, Safari 4+, iPad, Safari 5+, Firefox 3.6, Firefox 4+, Chrome 10+, Opera 11
Used Technologies: jQuery
Screen Shot: External link
Tags: google maps, jquery, dmxzone, extension, dreamweaver


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

  • Implemented Google Maps as Advanced HTML Editor 3 Add-on! Now you can add your Google Maps directly online in the editor!
  • Added compatibility with the new DMXzone Google Maps Drawing Add-on

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

  • New Auto Zoom: Now you can have the value 'fit' for zoom and the map will calculate optimal zoom level for markers
  • New Auto Center: Enter also 'fit' as value for the center point latitude/longitude and you will get optimal map center for all markers
  • Key Markers - now each marker can have its own key name! This makes it easy to apply actions to it later on by its name
  • Extended the Control DMXzone Google Maps behavior by many new actions! Now you can choose to GoTo/PanTo A Marker or Show Its Info Window by specifying its key name.
  • Additional Resize Actions in the Control DMXzone Maps behavior for redrawing the map after it is resized or shown. Very useful to force map redraw when it becomes visible for example when used with DMXzone Tabs or DMXzone Accordion extensions.
  • Improved extension installation for DW CS 5.5+

Version 1.0.2

  • Latest jQuery 1.6.3 included

Version 1.0.1

  • New language option to allow you to choose the Google Maps language
  • New option to auto show marker's info windows, when markers are displayed
  • Improved integration with Google Maps Directions Add-on and 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

Reviews

Combi Autocomplete, Google Map, Directions Add-on

Very nice and easy to use and comfortable tool. Within seconds you can create a Google Map. No more longer searching for latidude and longitude. But the combination of the three tools make it perfect!
An extension often to use!

DMXzone Google Maps

Very nice extension and very easy to use.  I am also please with the way DMXzone answers your questions in a timely manner and always ready to help.  

Cool Tool

Together AjaxAutocomplete and DMX Google Map, it is the tool where am i was searching for.

Good that AjaxAutocomplete can now store the record ID in a hidden field. Now i am able to work fast and good with this record in StoredProcedures.

With the DMX Google Maps i will now build up my new applications in a perfect way. What i need was the looking for the X/Y-Lat and Longs. Now i get them. Also to move the marker in the map. Very good. That i can get the google facts in form-fields i can work now with the recordsets. Very good.

What i missed (is it possible)? to search only for towns in Germany. So for BERLIN i geht all the towns in the world. But need only Germany, or other lands vor example.

Regards
Andreas Knapp

DMXZone Google Maps

Good product with great potential. Still has some issues with Internet Explorer and Chrome but they really seem to listen and respond quickly to any concerns and ideas.  Again, this product has huge potential upside as it evolves.