Back to Top
The nuts and bolts for
Creative web development

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 functionality directly in it. It's very simple to use and the effects that you can accomplish are stunning.

The Google Maps Drawing Add-on requires DMXzone Google Maps.


  • DMXzone Google Maps integration - In order to customize your map with drawings, simply select the Add-on from the add-ons tab in the DMXzone Google Maps UI and click the drawing options button.


  • Great Dreamweaver integration - Interactive dialog in Dreamweaver with all the options you'll need. Just interact with the Google Maps as you would normally: zoom, drag, switch views and use the drawing toolbar to add various shapes in various colors.


  • Draggable map - Change the location at any point you want by simply choosing the arrows and dragging the map with your mouse.


  • Polyline Tool - Draw any custom directions or anything you need on your map.


  • Rectangle shape - Use the rectangle shape in order to create a color overlay on your map.


  • Circle shape - You can also use the circle shape in order to point out a specific part of your map.


  • Polygon tool - Draw any multi-sided object on your map.


  • Color picker - Choose any color for your shapes and borders from the built-in color picker.


  • Opacity color level - Set the color intensity level to fit your map.


  • Stroke color, opacity and weight - Customize your overlay stroke with color, opacity, and thickness. 


  • Bring to front action - In order to top all other overlays, simply select the overlay and select "bring to front "action.


  • Move to back action - To move an overlay behind all others, select "move to back" action


  • Move forwards action - For a map with multiple overlays it's easy to move one overlay above the other using the "move forwards" action.


  • Move backwards action - For a map with multiple overlays it's easy to move one overlay behind the other using the "move backwards" action.


  • Delete action - If you wish to delete any overlay on the map, simply select it and click the delete action button.


  • Shape selection and properties - Additionally, you can resize your shape at any time by clicking on it and using the handles. If you wish to delete your last interactions just click the undo icon. 

As Advanced HTML Editor 3 Add-on:

  • Polyline, rectangle, circle and polygon tools and shapes - All tools and shape you need to customize your map are available in the toolbar.
  • Overlays actions - If you need to rearrange the overlays in your map, you can use the different actions from the toolbar.  
  • Color selection - There are 5 different colors to choose from for your shapes and objects. 
  • Stroke and overlay properties - Customize your stroke with color, opacity level and wight. You can also set an opacity lever for the overlay color. 


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



Type: Plugin
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CS5.5, Dreamweaver CC
Browser: Firefox 3.6+, Chrome 9+, IE 8, Safari 4+, Opera 10+, iPad, IE 9, Safari 5+, Firefox 3.6, Firefox 4+, Chrome 10+, Opera 11
Used Technologies: jQuery

The Google Maps Drawing Add-on runs on Dreamweaver 8 but we do not support it officially.

This Extension Requires:

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

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 – which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article