Fork me on GitHub

A small Google Maps Javascript plugin for jQuery

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
  • Hello, World

    • JS

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

      Html

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

    Markers

    • 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

    • 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

    • 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

    • 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:

    • 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

    • 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

    • 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,
              	force_generate_controls: true
      		});
      	});
      }
      
      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>
        <li><a href="javascript:void(0)" data-load="4" id="g4" title="Group E">Group E</a></li>
      </ul>
      <div id="controls-mixed"></div>
      <div id="gmap-mixed"></div>
      

    Fusion Tables

    • 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

    • 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
    force_generate_controls boolean false Force to generate menu also with one location
    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 object google.maps.ControlPosition.RIGHT_TOP Controls position on the right, below top-right elements of the map.
    As defined by Google
    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
    visualRefresh boolean true Enable/disable the new google maps look and feel
    map_options Object
    {
    	mapTypeId: google.maps.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: google.maps.TravelMode.DRIVING,
    	unitSystem: google.maps.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
    listeners Object {} Example:
    listeners: {
    	click: function(map, event) {
    		map.setOptions({scrollwheel: true});
        }
    }
    
    Docs: Google maps Events

    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://maps.google.com/mapfiles/markerA.png'
    	},
    	{
    			lat: 44.8,
    			lon: 1.7,
    			title: 'Title B1',
    			html: '<h3>Content B1</h3>',
    			icon: 'http://maps.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://maps.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>'
    	}
    ];