Maplace.Js Implementation

by pradeep

HTML

<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<link rel="stylesheet" href="http://maplacejs.com/stylesheets/app.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/maplace-js/0.2.10/maplace.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBE8BDZchi4qooq1nVvMev4Trg9byrQ_J8?sensor=false&amp;libraries=geometry&amp;v=3.7"></script>
<div id="controls"></div>
<div id="gmap" class="gmap"></div>

JavaScript

$(function() {
    new Maplace({
    show_markers: true,
        view_all_text: 'Select Country',
    locations: [{lat: 38.0, lon: -84.4, title: 'Address 1', html: '<h3>Address 1</h3><p> 740 West New Circle Road, Lexington, KY - 40509 USA</p>', zoom: 8, icon: 'http://www.google.com/mapfiles/markerA.png'},
	{lat: 41.0, lon: -73.8, title: 'Address 2', html: '<h3>Address 2</h3><p> 740 West New Circle Road, Lexington, KY - 40509 USA</p>', zoom: 6, icon: 'http://www.google.com/mapfiles/markerA.png'},
	{lat: 22.5, lon:88.4, title: 'Address 3', html: '<h3>Address 3</h3><p> 740 West New Circle Road, Lexington, KY - 40509 USA</p>', zoom: 4, icon: 'http://www.google.com/mapfiles/markerA.png'},
	{lat: 12.9, lon: -77.6, title: 'Address 4', html: '<h3>Address 4</h3><p> 740 West New Circle Road, Lexington, KY - 40509 USA</p>', zoom: 2, icon: 'http://www.google.com/mapfiles/markerA.png'},
	{lat: 12.8, lon:77.6, title: 'Address 5', html: '<h3>Address 5</h3><p> 740 West New Circle Road, Lexington, KY - 40509 USA</p>', zoom: 10, icon: 'http://www.google.com/mapfiles/markerA.png'}],
    controls_on_map: false
}).Load(); 
});