Cacher is the code snippet organizer for pro developers

#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>