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

Editor's Picks

Free Newsletters, In your Inbox