JSFiddle - React, Tailwind, and code Playground

by yeuem1vannam

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>


    





            
            
                        
            
            
            
            
            
            
            
            
            
            




    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
























































































































    
<script>

/* by: thinkingstiff.com
license: http://creativecommons.org/licenses/by-nc-sa/3.0/us/ */

var headerCaption = 'Google Maps multiple markers position',
    headerUri = 'http://stackoverflow.com/q/15164878/918414';
    
document.body.insertAdjacentHTML( 
    'afterBegin',
      '<a href="' + headerUri + '" '
    + 'target="_top" '
    + 'onmouseover="this.style.opacity=\'.95\'" '
    + 'onmouseout="this.style.opacity=\'1\'" '
    + 'style="'
        + 'background-color: black;'
        + 'background-image: linear-gradient( top, rgba( 255, 255, 255, .3), rgba(...

CSS

#map-canvas { 
    height: 600px; 
    width: 1000px;
}

JavaScript

var property_list = [
        {latlong: "23.7806364,90.4193257"},
        {latlong: "21.0242561,105.7860259"}
    ],
    options = {
        zoom: 4,
        center: new google.maps.LatLng( 21.89, 99.50 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    map = new google.maps.Map( 
        document.getElementById( 'map-canvas' ), 
        options 
    );

for( var index = 0; index < property_list.length; index++ ) {
    var latlong = property_list[index]['latlong'].split(','),
        latlng = new google.maps.LatLng( latlong[0], latlong[1] ),
        marker = new google.maps.Marker( {position: latlng, map: map} );
    marker.setMap( map );
};