Maplace.js - A small Google Maps Javascript helper.

Maplace.js helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.
It requires jQuery and Google Maps API v3 so you need to have both in your page.

Features

Straightforward implementation with simple options
Can run as many maps as required
Markers and custom icons, zoom level and custom controls menu
Supports for Directions, Polygons, Polylines, Fusion tables and styled maps
Works in all major browsers, including IE6 (this website not so much)
Released under the MIT license

Download

maplace.js (30kb)

maplace.min.js (13kb)

Hello, World

Example

Code

JS

var maplace = new Maplace(); 
maplace.Load(); 
// or new Maplace().Load();

Html

<div id="gmap"></div>

Markers

Example

Code

JS

//dropdown example
new Maplace({
  locations: LocsA,
  map_div: '#gmap-dropdown',
  controls_title: 'Choose a location:'
}).Load();

//ul list example
new Maplace({
  locations: LocsB,
  map_div: '#gmap-list',
  controls_type: 'list',
  controls_title: 'Choose a location:'
}).Load();

Html

<div id="gmap-dropdown"></div>
<div id="gmap-list"></div>

Tabs

Example

Code

JS

new Maplace({
  locations: LocsB,
  map_div: '#gmap-tabs',
  controls_div: '#controls-tabs',
  controls_type: 'list',
  controls_on_map: false,
  show_infowindow: false,
  start: 1,
  afterShow: function(index, location, marker) {
    $('#info').html(location.html);
  }
}).Load();

Html

<div id="controls-tabs"></div>
<div id="info"></div>
<div id="gmap-tabs"></div>

Path / Polyline

Example

Code

JS

new Maplace({
  locations: LocsA,
  map_div: '#gmap-polyline',
  controls_div: '#controls-polyline',
  controls_type: 'list',
  controls_on_map: false,
  view_all_text: 'Start',
  type: 'polyline'
}).Load();

Html

<div id="controls-polyline"></div>
<div id="gmap-polyline"></div>

Polygon

Example

Code

JS

new Maplace({
  locations: LocsA,
  map_div: '#gmap-polygon',
  controls_div: '#controls-polygon',
  controls_type: 'list',
  show_markers: false,
  type: 'polygon',
  draggable: true
}).Load();

Html

<div id="gmap-polygon"></div>

Route:

Example

Route

Code

JS

new Maplace({
  locations: LocsD,
  map_div: '#gmap-route',
  generate_controls: false,
  show_markers: false,
  type: 'directions',
  draggable: true,
  directions_panel: '#route',
  afterRoute: function(distance) {
    $('#km').text(': '+(distance/1000)+'km');
  }
}).Load();

Html

<h2>Route <strong id="km"></strong></h2>
<div id="gmap-route"></div>
<div id="route"></div>

Styled

Example

Code

JS

new Maplace({
  map_div: '#gmap-styled',
  locations: LocsAB,
  start: 3,
  styles: {
    'Other style': [{
      stylers: [
          { hue: "#00ffe6" },
          { saturation: -20 }
      ]
    }, {
      featureType: "road",
      elementType: "geometry",
      stylers: [
          { lightness: 100 },
          { visibility: "simplified" }
      ]
    }, {
      featureType: "road",
      elementType: "labels",
      stylers: [
          { visibility: "off" }
      ]
    }],
    'Night': [{
      featureType: 'all',
      stylers: [
        { invert_lightness: 'true' }
      ]
    }],
    'Greyscale': [{              
      featureType: 'all',
      stylers: [
        { saturation: -100 },
        { gamma: 0.50 }
      ]
    }]
  }
}).Load();

Html

<div id="gmap-styled"></div>

Mixed / Ajax

Example

Code

Group A

Group B

Group C

Group D

JS

var maplace = new Maplace({
  map_div: '#gmap-mixed',
  controls_div: '#controls-mixed',
  controls_type: 'list',
  controls_on_map: false
});

$('#tabs a').click(function(e) {
  e.preventDefault();
  var index = $(this).attr('data-load');
  showGroup(index);
});

function showGroup(index) {
  var el = $('#g'+index);
  $('#tabs li').removeClass('active');
  $(el).parent().addClass('active');
  $.getJSON('data/ajax.php', { type: index }, function(data) {
    //loads data into the map
    maplace.Load({
      locations: data.locations,
      view_all_text: data.title,
      type: data.type
    });
  });
}

showGroup(0);

Html

<ul id="tabs">
  <li><a href="javascript:void(0)" data-load="0" id="g0" title="Group A">Group A</a></li>
  <li><a href="javascript:void(0)" data-load="1" id="g1" title="Group B">Group B</a></li>
  <li><a href="javascript:void(0)" data-load="2" id="g2" title="Group C">Group C</a></li>
  <li><a href="javascript:void(0)" data-load="3" id="g3" title="Group D">Group D</a></li>
</ul>
<div id="controls-mixed"></div>
<div id="gmap-mixed"></div>

Fusion Tables

Example

Code

JS

new Maplace({
  map_div: '#gmap-fusion',
  type: 'fusion',
  map_options: {
    zoom: 2,
    set_center: [31.1, -39.4]
  },
  fusion_options: {
    query: {
      from: '423292',
      select: 'location'
    },
    heatmap: {
      enabled: true
    },
    suppressInfoWindows: true
  }
}).Load();

Html

<div id="gmap-fusion"></div>

Big Data

Example

Code

load 4k locations

JS

bigdata = new Maplace({
  map_div: '#gmap-big',
  show_infowindows: false,
  locations: big4k,
  commons: {
    zoom: 8,
    html: '%index'
  }
});

$('#load_bigdata').click(function(e) {
  e.preventDefault();
  $('#panel').fadeOut('fast', function() {
    $('#gmap-big').fadeIn();
    bigdata.Load();
  });
});

Html

<div id="panel">
  <a class="button" id="load_bigdata" href="#">load 4k points</a>
</div>
<div id="gmap-big" style="display:none"></div>

Requirements

Download the latest version of Maplace.js and include the Google Maps API v3 along with jQuery.

<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7">
</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="maplace.min.js"></script>

Html

Just place a DIV in your page and give it a unique ID or class, "gmap" by default, but you can change it in the options.

<div id="gmap"></div>

If you want the menu outside of the map you need to include another DIV with a unique ID or class, "controls" by default.

<div id="controls"></div>

JS

Now you can create the map.

<script type="text/javascript">
$(function() {
  new Maplace({
    locations: [{...}, {...}],
    controls_on_map: false
  }).Load();
});
</script>

If you want to center the map on a single location without any marker, you have two options:

new Maplace({
  show_markers: false,
  locations: [{
    lat: 45.9, 
    lon: 10.9,
    zoom: 8
  }]
}).Load(); 

//or

new Maplace({
  map_options: {
    set_center: [45.9, 10.9],
    zoom: 8
  }
}).Load();

Options

Option	Type	Default	Description
map_div	string	#gmap	Where you want to show the Map
controls_div	string	#controls	Where you want to show the menu. generate_controls must be *true* controls_on_map must be *false* At least more than one location on map
generate_controls	boolean	true	If *false*, the menu will not generated
controls_type	string	dropdown	To set the menu type choose between: dropdown \| list
controls_on_map	boolean	true	If *false, the menu will be generated into the element defined by the property controls_div*
controls_title	string		Add a title/header text to the menu
controls_cssclass	string		Add a custom class to the menu element
controls_applycss	boolean	true	If *false*, default styles to the menu will not be applied
controls_position	string	'RIGHT_TOP'	Controls position on the right, below top-right elements of the map.
type	string	marker	To set the Map type choose between: marker \| polyline \| polygon \| directions \| fusion
view_all	boolean	true	If *false* the link "view all" will not be created
view_all_text	string	View All	Set a custom text for the link "view all"
start	integer	0	Set the first location to show, 0 stands for "view all"
locations	Array <locations>	[]	List of locations being marked on the map. Check the location docs page for more details
commons	object	{}	Overwrite every location with a set of common properties
show_markers	boolean	true	If *false*, markers will not be visible on the map
show_infowindows	boolean	true	If *false*, infowindows will not be created
infowindow_type	string	bubble	Only bubble is supported
map_options	Object	{ mapTypeId: 'ROADMAP', zoom: 1 }	Map options as defined by Google. The property center will be ignored. Check at the Install page to see how to center the map with only one location
styles	Object	{}	Style options as defined by Google
stroke_options	Object	{ strokeColor: '#0000FF', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#0000FF', fillOpacity: 0.4 }	Stroke options as defined by Google. Used in Polyline/Polygon/Directions/Fusion Map type.
directions_options	Object	{ travelMode: 'DRIVING', unitSystem: 'METRIC', optimizeWaypoints: false, provideRouteAlternatives: false, avoidHighways: false, avoidTolls: false }	Direction options as defined by Google
directions_panel	string	null	ID or class of the div in which to display the directions steps.
fusion_options	Object	{}	Fusion tables options as defined by Google
draggable	boolean	false	If *true, allow the users to drag and modify the route, the polyline* or the polygon

Methods

Function	Params	Return	Description
AddControl	string <name>, function		Add you own menu type to the map. Check at the Menu Docs page for more details.
CloseInfoWindow			Close the current infowindow
ShowOnMenu	integer <index>	boolean	Checks if a location has to be shown on menu
ViewOnMap	integer <index>		Triggers to show a location on map
SetLocations	array <locations>, boolean <reload>		Replace the current locations
AddLocations	array <locations> \| object <location>, boolean <reload>		Adds one or many locations
AddLocation	object <location>, integer <index>, boolean <reload>		Adds one location at the specific index
RemoveLocations	array <indexes> \| integer <index>, boolean <reload>		Delete one or many locations
Load	null \| object <options>		Loads or updates the current configuration and constructs the map
Loaded			Checks if a Load() was already been called

Events

Option	Type	Default	Description
beforeViewAll	function		Fires before showing all the locations
afterViewAll	function		Fires after showing all the locations
beforeShow	function	(index, location, marker){}	Fires before showing the current triggered location
afterShow	function	(index, location, marker){}	Fires after showing the current triggered location
afterCreateMarker	function	(index, location, marker){}	Fires after a marker creation
beforeCloseInfowindow	function	(index, location){}	Fires before closing the infowindow
afterCloseInfowindow	function	(index, location){}	Function called after closing the infowindow
beforeOpenInfowindow	function	(index, location, marker){}	Fires before opening the infowindow
afterOpenInfowindow	function	(index, location, marker){}	Fires after opening the infowindow
afterRoute	function	(distance, status, result){}	Fires after the route calcoule
onPolylineClick	function	(obj) {}	Fires when click on polylines

Options

Option	Type	Description
lat	float	Latitude (required)
lon	float	Longitude (required)
title	string	Link title for the menu
html	string	Html content for the infowindow String %index will be replaced with the location index String %title will be replaced with the content of the title
icon	string/uri	Icon for the marker
zoom	integer	Zoom level when focus the marker
show_infowindow	boolean	Force to show or not the infowindow, *true* by default
visible	boolean	If *true, the marker is visible, true* by default
stopover	boolean	Available in type: directions If *true, indicates that this waypoint is a stop between the origin and destination. This has the effect of splitting the route in two. false* by default
*		Whatever you want to pass and catch in your menu function.
		For other options look at the Google page

Locations used in the examples

var LocsA = [
  {
      lat: 45.9,
      lon: 10.9,
      title: 'Title A1',
      html: '<h3>Content A1</h3>',
      icon: 'http://www.google.com/mapfiles/markerA.png'
  },
  {
      lat: 44.8,
      lon: 1.7,
      title: 'Title B1',
      html: '<h3>Content B1</h3>',
      icon: 'http://www.google.com/mapfiles/markerB.png',
      show_infowindow: false
  },
  {
      lat: 51.5,
      lon: -1.1,
      title: 'Title C1',
      html: [
          '<h3>Content C1</h3>',
          '<p>Lorem Ipsum..</p>'
      ].join(''),
      icon: 'http://www.google.com/mapfiles/markerC.png'
  }
];

var LocsB = [
  {
      lat: 52.1,
      lon: 11.3,
      title: 'Title A2',
      html: [
          '<h3>Content A2</h3>',
          '<p>Lorem Ipsum..</p>'
      ].join(''),
      zoom: 8
  },
  {
      lat: 51.2,
      lon: 22.2,
      title: 'Title B2',
      html: [
          '<h3>Content B2</h3>',
          '<p>Lorem Ipsum..</p>'
      ].join(''),
      zoom: 8
  },
  {
      lat: 49.4,
      lon: 35.9,
      title: 'Title C2',
      html: [
          '<h3>Content C2</h3>',
          '<p>Lorem Ipsum..</p>'
      ].join(''),
      zoom: 4
  },
  {
      lat: 47.8,
      lon: 15.6,
      title: 'Title D2',
      html: [
          '<h3>Content D2</h3>',
          '<p>Lorem Ipsum..</p>'
      ].join(''),
      zoom: 6
  }
];

var LocsAB = LocsA.concat(LocsB);

var LocsC = [
  {
      lat: 45.4654,
      lon: 9.1866,
      title: 'Milan, Italy'
  },
  {
      lat: 47.36854,
      lon: 8.53910,
      title: 'Zurich, Switzerland'
  },
  {
      lat: 48.892,
      lon: 2.359,
      title: 'Paris, France'
  },
  {
      lat: 48.13654,
      lon: 11.57706,
      title: 'Munich, Germany'
  }
];

var LocsD = [
  {
      lat: 45.4654,
      lon: 9.1866,
      title: 'Milan, Italy',
      html: '<h3>Milan, Italy</h3>'
  },
  {
      lat: 47.36854,
      lon: 8.53910,
      title: 'Zurich, Switzerland',
      html: '<h3>Zurich, Switzerland</h3>',
      visible: false
  },
  {
      lat: 48.892,
      lon: 2.359,
      title: 'Paris, France',
      html: '<h3>Paris, France</h3>',
      stopover: true
  },
  {
      lat: 48.13654,
      lon: 11.57706,
      title: 'Munich, Germany',
      html: '<h3>Munich, Germany</h3>'
  }
];

Adding a new menu type

This is a simple checkbox menu example. You have to define two methods to make it work: activateCurrent and getHtml
and this variable will be scoped to the current Maplace instance.

var html_checks = {
    //required: called by Maplace.js to activate the current voice on menu
    activateCurrent: function(index) {
        this.html_element.find("input[value='" + index + "']").attr('checked', true);
    },
    //required: called by Maplace.js to get the html of the menu
    getHtml: function() {
        var self = this,
            html = '';

        //if more than one location
        if(this.ln > 1) {
            html += '<div class="checkbox controls ' + this.o.controls_cssclass + '">';

            //check "view all" link
            //use ShowOnMenu(index) to know if a location has to appear on menu
            if(this.ShowOnMenu(this.view_all_key)) {
                html += '<label><input type="radio" name="gmap" value="'
                     + this.view_all_key + '"/>' + this.o.view_all_text + '</label>';
            }

            //iterate the locations
            for (var a = 0; a < this.ln; a++) {
                if(this.ShowOnMenu(a)) 
                  html += '<label><input type="radio" name="gmap" value="' + (a+1) + '"/>' 
                       + (this.o.locations[a].title || ('#' + (a+1))) + '</label>';
            }
            html += '</div>';
        }

        this.html_element = $('<div class="wrap_controls"></div>').append(html);

        //event on change
        //use ViewOnMap(index) to trigger the marker on map
        this.html_element.find('input[type=radio]').bind('change', function() {
            self.ViewOnMap(this.value); 
        });
        
        return this.html_element;
    }
};

//new Maplace object
var maplace = new Maplace();

//add the new menu with the method AddControl(name, function)
maplace.AddControl('checks', html_checks);

//load the map
maplace.Load({
  controls_type: 'checks',
  locations: [{...}, {...}]
});