Google Map using Maplace.js
#gmap{
width: 800px;
height: 400px;
border: 1px solid #6699FF;
padding: 5px;
border-radius: 20px;
margin: 5px auto;
}
#controls {
width:150px;
}
.ullist a span{
display: inline-block;
background: #FF5050;
width: 70%;
color: #fff;
padding:10px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.13"></script>
<script src="http://maplacejs.com/dist/maplace.min.js"></script>
<script src="http://codepen.io/invincibleking77/pen/JanBg"></script>
$(function(){
var LocsA = [
{
lat: 12.58,
lon: 77.38,
title: 'Bangalore',
html: 'Bangalore, Karnataka, India',
zoom: 4,
icon: 'http://maps.google.com/mapfiles/markerA.png',
animation: google.maps.Animation.DROP
},
{
lat: 18.975,
lon: 72.8258,
title: 'Mumbai',
html: 'Mumbai, Maharashtra, India',
zoom: 4,
icon: 'http://maps.google.com/mapfiles/markerB.png',
animation:google.maps.Animation.DROP
},
{
lat: 25.6110,
lon: 85.1440,
title: 'Patna',
html: 'Patna, Bihar, India',
zoom: 4,
icon: 'http://maps.google.com/mapfiles/markerC.png',
animation:google.maps.Animation.DROP
},
{
lat: 28.6139,
lon: 77.2089,
title: 'New Delhi',
html: 'New Delhi, India',
zoom: 2,
icon: 'http://maps.google.com/mapfiles/markerD.png',
animation:google.maps.Animation.DROP
},
{
lat: 21.17,
lon: 72.83,
title: 'Surat',
html: 'Surat, Gujarat, India',
zoom: 4,
icon: 'http://maps.google.com/mapfiles/markerE.png',
animation:google.maps.Animation.DROP
}
];
new Maplace({
locations: LocsA,
map_div: '#gmap',
controls_type: 'list',
controls_title: 'Choose a place',
start: 4,
view_all_text: 'India',
type: 'polyline'/*'circle'*/,
shared: {
zoom: 16,
html: '%index'
},
circleRadiusChanged: function(index, point, marker) {
$('#radiusInfo').text(
' - point #' + (index+1) + ' size: ' + parseInt(marker.getRadius()) + 'mt.'
);
}
}).Load();
});
<div id="controls"></div>
<div id="gmap"></div>
implementation of Google Map using Maplace.js http://maplacejs.com/