SHOWING ALL USERS ON GOOGLE MAP WITH COSTUME MARKER

Showing All User on google map with marker.
Showing Available Shop On google map.
On click on marker show shop detail with chatting button and shopping buttom
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvuPSxdugPS2FJQibo-i78wVZHWgmKemk&libraries=places"></script>
<script>
  $(document).ready(function()
  {
    var locations = <%= raw @map_data.to_json %>;
    console.log("Data", locations)
   var searchBox = new google.maps.places.SearchBox(document.getElementById('map'));
      google.maps.event.addListener(searchBox , 'place_changed' , function(){
            var places = searchBox.getPlaces();
            var bounds =  new google.maps.LatLngBounds();
            var i,place;
            for( i = 0; palce = places[i]; i++)
            {
            bounds.extend(place.geometry.location);
            marker.setPosition(place.geometry.location);
            }
            map.fitBounds(bounds);
            map.setZoom(5);
        });
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: new google.maps.LatLng(<%= @map_data.first[1] %>, <%= @map_data.first[2] %>),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });
     
   //Add circle overlay and bind to marker
      var circle = new google.maps.Circle({
      center: new google.maps.LatLng(0.285513918e2, 0),
        map: map,
        radius: 10000,    // 10 km in metres
        fillColor: 'transparent'
      });
      circle.bindTo('center', marker, 'position');

      $("#loc").val(locations[i][0]);
        google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
            var current = <%= current_user.id %>
            console.log("*****************", current);
            var Content = '<div class="card">' + '<h3 class="card-title">' + locations[i][4] + '</h3>' + " " + '<div class="card-text">'  + locations[i][5]+locations[i][6] + '</div>' + '</div>' + '<br>' + (current == locations[i][7] ? '<a href=" /products/user/' + locations[i][7] + '", class="button button-3 button-3c icon-heart-2">Visit My Shop</a>'
              + '<br>' + '' :
                    '<a href="/personal_messages/new?receiver_id=' + locations[i][7] + '", class="button button-4 button-4c icon-arrow-right", i class="fa fa-arrow-right">Chat With Us!</a>' + '<br/>' + '<a href=" /products/user/' + locations[i][7] + '", class="button button-3 button-3c icon-heart-2">Visit My Shop</a>'
                )
                  infowindow.setContent(Content);
                  infowindow.open(map, marker);
            }
      })(marker, i));
    }
  });

</script>