Maplace.Js – 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

 

Maplace.Js - A small Google Maps Javascript plugin for jQuery Maplace.Js - A small Google Maps Javascript plugin for jQuery Maplace.Js - A small Google Maps Javascript plugin for jQuery Maplace.Js - A small Google Maps Javascript plugin for jQuery

EXAMPLES (DEMOS) DOWNLOAD

 

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:

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

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();

EXAMPLES (DEMOS) | DOWNLOAD


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *