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