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