Requirements

To use Maplace.js, you need to include jQuery, the Google API v3, and the plugin file.

<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.22&key=YOUR_API_KEY">
</script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="maplace.min.js"></script>

About the API_KEY for Google Maps API

All JavaScript API applications require authentication using an API key (or a client ID for Google Maps API for Work customers). Including a key when loading the API allows you to monitor your application's API usage in the Google Developers Console, enables per-key instead of per-IP-address quota limits, and ensures that Google can contact you about your application if necessary.

For more info please go to Google Maps JavaScript API developers website

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" style="with:300px;height:250px;"></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();