Google map custom marker and custom Info window

Question

I have created a google map with multiple locations with multiple markers. I'm trying to use a custom marker image with info window containing the content what I have selected from the location selector, see image below.

How do I get the layout as shown in the image below.

Note: Achieved a custom marker and edited map JavaScript.

var locations = [
      ['Mehdipatnam', 17.3916, 78.4400, 4],
      ['Panjagutta',  17.4264, 78.4511, 3],
      ['East Marredpally', 17.4299, 78.5136, 2],
      ['Tarnaka', 17.4299, 78.5279, 1]
    ];

    var map = new google.maps.Map(document.getElementById('iva_map'), {
      zoom: 12,
      center: new google.maps.LatLng(17.38, 78.48),
      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
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

#iva_map{
    position: relative !important;
    width: 100%;
    height: 100%;
    min-height: 600px;
    opacity: 0.8;
    z-index: 1;
}

.iva_map_location {
    position: relative;
    z-index: 1;
    font-size: 13px;
}

.iva_location_wrapper {
    position: absolute;
    left: 0;
    right: 50%;
    bottom: 0;
    top: 0;
}

.iva_location_box {
    position: relative;
    background-color: #fdfcfc;
    margin: 0 auto;
    width: 400px;
    margin-top: 25%;
    padding: 20px;
    border-radius: 10px;
    z-index: 2;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(102, 102, 102, 0.7);
    -moz-box-shadow: 0px 0px 5px 2px rgba(102, 102, 102, 0.7);
    box-shadow: 0px 0px 5px 2px rgba(102, 102, 102, 0.7);

}

.iva_location_details {
    text-align: left;
    padding: 30px 0;
    background-color: #fdfcfc;
}

.iva_location_head {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
    overflow: hidden;
}

.iva_location_item{
    position: relative;
    background-color: #f3f3f3;
    border-bottom: 1px solid #e3e2e2;
    cursor: pointer;
}

.iva_location_item span {
    font-size: 13px;
    font-weight: bold;
}

.iva_gd_icon {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -13px;
}

.iva_location_active {
    background-color: #ec5f41;
    color: #ffffff;
}

.iva_location_address {
    width: 80%;
    font-weight: normal;
    margin: 8px 0 0 0;
    padding: 0;
}

.iva_location_address li {
    list-style: none;
    padding-bottom: 5px;
}

.iva_location_title_wrap {
    float: left;
}

.iva_select_location {
    font-size: 12px;
    font-weight: normal;
    padding: 0;
    margin: 5px 0;
    border: 1px solid #ccc;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #ffffff;
    background: #ffffff url("http://www.aivahthemes.com/carzone/wp-content/themes/carzone/images/arrowdown.gif")   no-repeat 90% 50%;
}

.iva_select_location select {
    padding: 10px;
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.mapSubheading {
  background-color: #ec5f41;
  color: #ffffff;
  padding: 15px 20px;
}

/* Scrollbar */

.scrollbar {
	height: 420px;
	overflow-y: scroll;
}

/* Scrollbar Style */
#scrollbar_style::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

#scrollbar_style::-webkit-scrollbar {
	width: 12px;
	background-color: #F5F5F5;
}

#scrollbar_style::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

.iva_address_wrap {
    position: relative;
    margin-left: 50px;
    padding: 15px 0;
}

.iva_map_marker {
    position: absolute;
    background-color: #e7e0e0;
    border-bottom: 1px solid #F1F1F1;
    left: 0;
    bottom: 0;
    top: 0;
    width: 40px;
}

.iva_location_active .iva_map_marker {
    background-color: #db5335;
    border-bottom: 1px solid #db5335;
    color: #ffffff;
}

.iva_map_marker .fa-map-marker{
    position: absolute;
    top: 50%;
    right: 13px;
    margin-top: -13px;
}

.iva_location_details .iva_location_item:last-child { border-bottom: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
    <div class="iva_map_location">
      <div id="iva_map"></div>
        <div class="iva_location_wrapper">
            <div class="iva_location_box">
              <div class="iva_location_details scrollbar" id="scrollbar_style">
                  <div class="iva_location_head">
                      <div class="iva_select_location">
                          <select name="iva_cities" id="iva_cities" class="postform">
                              <option value="">Select Location</option>
                              <option value="hyderabad">Hyderabad</option>
                              <option value="secunderabad">Secunderabad</option>
                              <option value="secunderabad">Mehendipatnam</option>
                          </select>
                      </div>
                  </div>

                  <div class="iva_location_item iva_location_active"  data-addr="Panjagutta, Hyderabad, Telangana, India" data-lng="78.45113220000007" data-lat="17.4264979">
                      <span class="iva_gd_icon"><i class="fa fa-map-o fa-2x"></i></span>
                      <span class="iva_map_marker"><i class="fa fa-map-marker fa-2x"></i></span>
                      <div class="iva_address_wrap">
                          <span>Panjagutta Branch</span>
                          <ul class="iva_location_address">
                              <li>Panjagutta, Hyderabad, Telangana, India</li>
                              <li><i class="fa fa-phone fa-fw"></i>123-456-7890</li>
                          </ul>
                      </div>
                  </div>

                  <div class="iva_location_item" data-addr="Tarnaka, Vijayapuri Colony, Secunderabad, Telangana, India" data-lng="78.5279" data-lat="17.4400">
                      <span class="iva_gd_icon"><i class="fa fa-map-o fa-2x"></i></span>
                      <span class="iva_map_marker"><i class="fa fa-map-marker fa-2x"></i></span>
                      <div class="iva_address_wrap">
                          <span>Tarnaka Branch</span>
                          <ul class="iva_location_address">
                              <li>TarnakaVijayapuri Colony, Secunderabad, Telangana, India</li>
                              <li><i class="fa fa-phone fa-fw"></i>123-456-7890</li>
                          </ul>
                      </div>
                  </div>

                  <div class="iva_location_item" data-addr="East Marredpally, Secunderabad, Telangana, India" data-lng="78.5136" data-lat="17.4299">
                      <span class="iva_gd_icon"><i class="fa fa-map-o fa-2x"></i></span>
                      <span class="iva_map_marker"><i class="fa fa-map-marker fa-2x"></i></span>
                      <div class="iva_address_wrap">
                          <span>East Marredpally Branch</span>
                          <ul class="iva_location_address">
                              <li>East Marredpally,Secunderabad, Telangana, India</li>
                              <li><i class="fa fa-phone fa-fw"></i>123-456-7890</li>
                          </ul>
                      </div>
                  </div>

                  <div class="iva_location_item"  data-addr="Mehdipatnam, Hyderabad, Telangana, India" data-lng="78.4400" data-lat="17.3916">
                      <span class="iva_gd_icon"><i class="fa fa-map-o fa-2x"></i></span>
                      <span class="iva_map_marker"><i class="fa fa-map-marker fa-2x"></i></span>
                      <div class="iva_address_wrap">
                          <span>Mehdipatnam Branch</span>
                          <ul class="iva_location_address">
                              <li>Panjagutta, Hyderabad, Telangana, India</li>
                              <li><i class="fa fa-phone fa-fw"></i>123-456-7890</li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>

For better understanding I have attached screenshot of map and provide a demo code also.

Answer 1

You can use something like that.

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: 'your_custom_icon_URL',
        < -your icon url here
        map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            var popupString = '<div><b>' + locations[i][0] + '</b></div>'; < -your custom HTML codes with the design here.

            infowindow.setContent(popupString);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

I hope that can help you.

Thanks