Google Maps Generator

Google Maps Generator - powered by Google Maps API 3

The Google Maps Generator uses the Google Maps API 3 to generate all the HTML, CSS and Javascript you need to create a map that you can embed into your web site. Google Maps is free to use (apart from a few very high usage restrictions), and can make a great interactive addition to your site when providing location based features or information. To get started you should obtain your personal API key that you can embed into your code. This allows you monitor your usage and means Google can contact you about your application if they need to.

Tool Features

london-google-maps

Clickable menu

The menu feature allows you to use the markers for your map to generate a clickable menu, which will zoom into the specific location. This is great for highlighting points of interest on a map.

icons

Clickable Markers

Create clickable markers with description text using a range of different marker icons.

beach-google-maps

Map Types and Controls

Utilise Google Maps API features including different map types (Satellite, Hybrid, Terrain), and a configurable control box to choose if your map shops (pan, zoom, street view and scale).

Using the tool

Set the location

google-maps

To start with you'll need to set the location for your map so that it is centered in the correct place. To do this simply search for a specific location, or drag and zoom accordingly. Once you're happy just click the 'USE CURRENT POSITION' button to confirm and the the coordinates and zoom level will be logged.

Define the layout

The first tab on the tool titled 'Layout' allows you to choose the height and width of your map in pixels. Keep in mind if you're going to use the side menu feature you'll need to reserve some space for this, though you can always come back and modify this later.

Configure the settings

The next tab allows you to customise the features of the map, this includes the map 'type' that allows you to switch to other view variants including satellite and terrain. Here you can also optionally remove some of the user controls if you want a simpler appearance for your map, or don't won't to allow your users to zoom or use certain features.

If you would like a menu on the side of your map that allows users to click and zoom to location then use the 'Show Marker Menu' option.

If you have an API key you can add it in this section so that it is automatically added into the output code at the end.

Markers

Follow these steps to add a marker to your map:

  • Enter a title and optional 'Popup description' in the first two fields. If you provide any data in the popup description this will display when a user clicks on the marker. This field does accept HTML.
  • Scroll and zoom on the preview map to find the ideal location for your marker, then click the 'Set Location' button. You can then click on the map to confirm your location. If you don't get the positioning exactly right on first click, you can drag the marker afterwards.
  • Choose the icon you would like to use (if you don't select one it will default to the red pointer), and the click 'Save' to confirm your marker.

You'll see that following these steps will add your marker to both the preview map, and to the markers table should you wish to delete one later.

The Marker Menu

This feature makes the Google Maps Generator really useful - while you're adding each of your markers a menu will be automatically generated for you that will allow users to click on the marker locations and zoom in to view the area closer. On the 'Menu' tab you have the ability to customise the colours of your menu, and also define how far in the map will zoom when the user clicks one of the menu options. You can test this feature using the preview.

Save and share!

Don't forget with Coveloping membership you can save your maps to edit them later, and share them with your colleagues or friends.

Customise control options

Choose the control options for your map including a menu of markers, pan control, zoom control, map type control, street view control and scale control. You can easily toggle these options for either a clean look or fully-featured control panel.

Markers

Add markers to your map including a title, description and a selection of different icon images.

Sign up now for your free trial

Join Coveloping membership from $4.99 a month and get your first month free, cancel at any time


Start Now

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...

Your Templates

No templates available.

Community Templates

Google Maps Generator

The 7 natural wonders of the World

View

London Top 10 Tourist Attractions

View

TripAdvisor Best World Destinations

View

TripAdvisor Top 5 World Beaches

View

HTML

CSS

JS

Images

Right click and choose 'Save As' on any of the images you wish to use.

Search Location To Center Map:

Search for the starting location above

  • Layout

  • Settings

  • Markers

Code Copied!