Map markers

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js?ver=1.11.3"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="villages-map">
<ul class="villages">
    <li id="m1" data-lat="-32.5600086" data-lng="115.68998529999999">Location 01</li>
    <li id="m2" data-lat="-33.6630543" data-lng="115.34077100000002">Location 02</li>
    <li id="m3" data-lat="-31.9230392" data-lng="116.03458130000001">Location 03</li>
</ul>
<div class="acf-map">
<div class="marker " data-lat="-32.5600086" data-lng="115.68998529999999" data-icon="https://cdn0.iconfinder.com/data/icons/glyphpack/52/map-marker-64.png">
    <img src="https://cdn.houseplans.com/product/q7r2l7ip1ue1mo33nfvno5via0/w120x80.jpg" alt="Location 01" />
    <h2>Location 01</h2>
    <p>
    Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor<br/><br/>
    <a href="#" class="text-link">Keep reading</a>
    </p>
</div>

<div class="marker " data-lat="-33.6630543" data-lng="115.34077100000002" data-icon="https://cdn0.iconfinder.com/data/icons/glyphpack/52/map-marker-64.png">
    <img src="https://cdn.houseplans.com/product/gehm2f287f1i17atilo5gdqn3j/w120x80.jpg" alt="Location 02" />
    <h2>Location 02</h2>
    <p>
    Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor<br/><br/>
    <a href="#" class="text-link">Keep reading</a>
    </p>
</div>

<div class="marker " data-lat="-31.9230392" data-lng="116.03458130000001" data-icon="https://cdn0.iconfinder.com/data/icons/glyphpack/52/map-marker-64.png">
    <img src="https://cdn.houseplans.com/product/qcuirv3s1utgb9cndtc79tiafd/w120x80.png" alt="Location 03" />
    <h2>Location 03</h2>
    <p>
    Lorem ipsum dolor sit amet, enim ac quis lectus in, pharetra lorem sodales metus tortor<br/><br/>
    <a href="#" class="text-link">Keep reading</a>
    </p>
</div>
</div>
</div>

CSS

.villages-map {
width:100%;
height:660px;
position:relative;
}

.villages-map .villages {
position:absolute;
top:50%;
left:5%;
list-style-type:none;
color:#fff;
z-index:2;
margin:0;
}

.villages-map .villages li {
display:block;
font-size:1.6em;
cursor:pointer;
margin:0 0 3px;
}

.villages-map .villages li span {
display:inline-block;
border-radius:2px;
padding:8px 10px;
}

.villages-map .acf-map {
height:860px;
float:right;
width:100%;
margin:0;
}

.villages-map .acf-map svg {
width:100px!important;
}

.villages-map .acf-map img {
max-width:inherit!important;
}

.villages-map #iw-container {
position:relative!important;
}

.villages-map #iw-container h2 {
font-size:1.6em;
color:#0063a8;
margin:0;
padding:10px 15px 0;
}

.villages-map #iw-container p {
margin:0;
padding:10px 15px;
}

.villages-map .gm-style-iw {
width:270px!important;
height:300px!important;
top:15px!important;
right:30px!important;
background-color:#fff;
-webkit-box-shadow:0 1px 6px rgba(178,178,178,0.6);
box-shadow:0 1px 6px rgba(178,178,178,0.6);
}

JavaScript

(function($) {

        /*
        *  new_map
        *
        *  This function will render a Google Map onto the selected jQuery element
        *
        *  @type	function
        *  @date	8/11/2013
        *  @since	4.3.0
        *
        *  @param	$el (jQuery element)
        *  @return	n/a
        */

        // http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html

        function new_map( $el ) {

            // var
            var $markers = $el.find('.marker');

            var mapStyle =...