Developer

Create custom, embeddable Google Maps in minutes

This demo shows how to use the Google Map Builder tool to customize a Google Map and then embed it into a website or web page document.

 

maps-main_610x320.png
 Image: Google Maps
 

Google Map Builder is a tool developed by Scottish developer Donald A. Sutherland that allows you to edit and create a custom Google Maps that you can add to any web page document or website. The tool includes features that help you add or modify map controls, scales, views, and map markers, set default zoom levels, and much more.

I present an overview of Google Map Builder using a demo of the resulting code embedded within a sample index.html web page document. All screen captures of Google Map Builder and the demo index.html web page are from Chrome version 31.0.1650.63 m as installed on my Windows OS desktop.

Google API key required

The only requirement is that you need to add a Google API key, which gets inserted into the embedded script code. If you do not already have a Google API key, you will need to get one to load the Google Maps API. Learn how to acquire one by reading the Google tutorial Obtaining an API Key

Controls

Donald has included a nice collection of controls that allow you to customize your map, which will eventually get applied to the script functions once you submit and get your generated code. The controls and their options are listed below. Options noted with an asterisk (*) are the default setting for each control.

  • Size width x height in px – (550 x 400*)
  • Map Center – Latitude, Longitude, and Zoom level
  • Add Marker(s) – blank, add an address per line
  • Marker Icon URL – allows you to add a custom marker icon by URL
  • Map Type Control – None, Dropdown Menu, Horizontal bar*
  • Zoom Control – None, Small, Large, Default*
  • Scale Control – None, Standard*
  • Street View Control – None, Standard*
  • Pan Control - None, Standard*
  • Overview Control – None, Opened, Collapsed*
  • Draggable - None, Standard*
  • Double Click to Zoom - None, Standard*
  • Mouse Wheel to Zoom - None, Standard*
  • Map Type – Road Map*, Satellite, Hybrid, Terrain
  • Map Theme (From Snazzy Maps) – None*

If you're interested in customizing your own map markers, check out the tutorial Customizing Google Maps: Custom Markers.

Demo customizing a Google Map

The control options when selected eventually become the script variables when the code gets generated and ultimately create the custom Google Map that you can embed into your websites. I will quickly customize a sample map using my API key and a well-known mapping coordinate for the Eastern New Orleans swamp land that sits at latitude 30 by longitude -90 (aka "30 by 90").

I will keep the default map size dimension of 550 x 400 px, with a dropdown menu map control type, zoom level set to 10, and the overview control set to opened. I select the MapBox Snazzy Maps theme, with all other control options remaining at their default selections. (Snazzy Maps provides a repository of different styles for Google Maps; all styles are licensed under a creative commons attribution, and are free to use.)

A portion of the control selections are displayed in Figure A.

Figure A

 

GoogleMapBuilder_FigA_012414.gif

Once all the controls are selected, I click the Get Code button, and the resulting generated code is displayed in the pop-up windows (Figure B).

Figure B

 

GoogleMapBuilder_FigB_012414.gif

Google Map Builder generates a CSS style with a map id setting the width and height, as shown in the code snippet below.

 

<style> 
#map{
    width:550px;
    height:400px;
}
</style>
 

The HTML code snippet that I added to the index.html file is copied below.

 

<p><strong>Google Map Builder Demo - "Thirty By Ninety"</strong></p>

<section id="map">

</section>
 

The script code that Google Map Builder generates includes all functions based on the control selections from the tool, and a section of the code snippet is displayed below.

 

<script src="https://maps.googleapis.com/maps/api/js?key=%Enter-Google-API-Key-Here%&sensor=false&extension=.js"></script> 
<script> google.maps.event.addDomListener(window, 'load', init);
var map;

function init() {
    var mapOptions = {
        center: new google.maps.LatLng(30,-90),
        zoom: 10,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT,
        },
        disableDoubleClickZoom: true,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        },
        scaleControl: true,
        scrollwheel: true,
        streetViewControl: true,
        draggable : true,
        overviewMapControl: true,
        overviewMapControlOptions: {
            opened: true,
        },
    }

    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
    var locations = [

    };

}
</script>
   

The resulting Google Map is displayed in Figure C.

Figure C

 

GoogleMapBuilder_FigC_012414.gif
I got this demo map code generated from Google Map Builder and embedded into the demo index.html file within minutes. The ease of use, the controls options, and the variety of map themes by Snazzy Maps gives you a powerful tool to create and embed your own custom Google Maps within mere minutes. 

  

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

5 comments
Jonathan19991
Jonathan19991

Hi Ryan, thank you very much for this brilliant post, however, I'm still not 100% clear that where should the last part of code snippet goes? The code that includes function init()? Many Thanks. 

Yummy Hello
Yummy Hello

hi guys,
I need this kind of application:
- an app that gets my location and shows it with a marker on Google map.
- this app should have a button and when I click on it:
It select from my database nearest restaurants (within any range, maybe 1 miles) and show them with markers on the map.
=>of course restaurants are stored in the database with their names and coordinates (latitude & longitude).

If anyone ever seen any tutorial to do such an app, please tell me.
Thx

mfmsmith
mfmsmith

I am really sorry, but you do not list steps to explain what to do. Really not at all. You do not even begin by saying click on Google Map Builder to start with. You do not say where and when to input the code you need to obtain from Google in advance. You say that the program generates a 'CSS style' - presumably a noun describing a kind of segment of Javascript code; but I've no idea what it is. You do not say where and what to insert depending on what you are trying to achieve. I am hoping that you can rewrite this to explain to non-coding people how to do this. I found the link in the education section of the International Cartographic Institute's information page, and got there from a Collins Education email which I received. So the expectation is that non-specialists ie teachers, arts people, by following the links, ought to be enlightened. Sorry to sound critical. I am probably hard to explain things to. I tried plotting a map by tracing the lines of a coastline onto a grid and then generating points with a program called Graph. (It was for the UK). It worked OK but I had to create a screendump with Snipping Tool and join up the points manually (by cursor input) as Graph is more interested in finding average lines etc in a Mathematics way. Your way, if it could be explained simply enough for me to master it, might be teachable to children. Then they could themselves generate custom maps, which was my aim. Best wishes and thanks. Martin

markaid1
markaid1

Thanks for sharing - I spent a nightmare few nights trying to work with embedding Google maps into a local directory - this would have helped me at the time! 

helge
helge

This was great. A very easy way to get your own custum map on your website.

Editor's Picks