JSFiddle - React, Tailwind, and code Playground

by Alvin Olavarrieta

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div class="acf-map"></div>
<ul id="listdata">

</ul>

<div id="newdiv">
<div class="marker" data-lat="52.1989321" data-lng="0.13911170000005768">
	<h4 class="title">Devonshire Arms</h4>
	<p class="address">1 Devonshire Road, Cambridge CB1 2BH, United Kingdom											<br/>
	<a href="" target="_blank" class="website" title="Devonshire Arms"></a>
	</p>
</div>

								
<div class="marker" data-lat="52.133925" data-lng="-0.06048620000001392">
	<h4 class="title">The Hardwick Arms</h4>
	<p class="address">96 Ermine Way, Arrington, Royston SG8 0AH, UK											<br/>
	<a href="" target="_blank" class="website" title="The Hardwick Arms"></a>
	</p>
</div>

								
<div class="marker" data-lat="52.2174743" data-lng="0.13941890000000967">
	<h4 class="title">The Haymaker</h4>
	<p class="address">54 High Street Chesterton, Cambridge CB4 1NG, United Kingdom											<br/>
	<a href="" target="_blank" class="website" title="The Haymaker"></a>
	</p>
</div>

								
<div class="marker" data-lat="52.204516" data-lng="0.13281140000003688">
	<h4 class="title">The Tram Depot</h4>
	<p class="address">3 Dover Street, Cambridge CB1 1DY, United Kingdom											<br/>
	<a href="" target="_blank" class="website" title="The Tram Depot"></a>
	</p>
</div>
    
</div>

CSS

.acf-map{
    width:500px;
    height:300px;
   
}

#listdata{
    display: block;    
}

#listdata div{
     background: yellow;   
}

#listdata div h4 {
    font-size: 20px;
}


.linkage{
     cursor: pointer;    
}


#newdiv{
    display: block;
    }

JavaScript

/* Google Maps */
(function($) {

function render_map( $el ) {
    
    // var
    var $markers = $(document).find('.marker');
   
    
    // vars
    var args = {
        zoom        : 16,
        center      : new google.maps.LatLng(0, 0),
        mapTypeId   : google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        mapTypeControlOptions: {
          mapTypeIds: [google.maps.MapTypeId.ROADMAP]
        }
    };

    // create map               
    var map = new google.maps.Map( $el[0], args);

    // add a markers reference
    map.markers = [];
    // add markers
    index=0;
    $markers.each(function(){
        add_marker( $(this), map, index);
        index++;
    });
   
    // center map
    center_map( map );

    }
    
function add_marker( $marker, map, index ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
    var image = 'http://79.170.40.181/cranes.co.uk/wp-content/uploads/2014/10/pin.png';

    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map         : map,
        icon        : image
    });

    // add to array
    map.markers.push( marker );
    
    
    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        $('#listdata').append('<div class= "linkage" id="p'+index+'">'+$marker.html()+'</div>'); // change html here if you want but eave id intact!!
         
        $(document).on('click', '#p'+index, function(){
            infowindow.open(map, marker);
            setTimeout(function () { infowindow.close(); }, 5000);
        });
      
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content     : $marker.html(),
        });
        
      
          

        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {

            infowindow.open( map, marker );

        });

    }

   ...