JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://rawgit.com/googlemaps/v3-utility-library/master/richmarker/src/richmarker.js"></script>
<div id="map"></div>

SCSS

html,body{
    width: 100%;
}

body{
    margin: 0;
}

#map{
    width: 100%;
    height: 400px;
}

.richmarker-wrapper{
    p{
        margin: 0;
        color: red;
        background-color: blue;
        padding: 10px;
        font-size: 22px;
    }
}

JavaScript

function initialize(){
	var loc, map;

	loc = new google.maps.LatLng(-33.890542, 151.274856);

	var locations = [
		['Bondi Beach', -33.890542, 151.274856, 'Foo'],
		['Coogee Beach', -33.923036, 151.259052, 'Bar']
	];

	map = new google.maps.Map(document.getElementById('map'),{
		zoom: 11,
		center: loc,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	for(var i = 0; i < locations.length; i++){
		curMarker = new RichMarker({
			position: new google.maps.LatLng(locations[i][1], locations[i][2]),
			map: map,
			content: '<div class="richmarker-wrapper"><p>'+locations[i][3]+'</p></div>',
			shadow: 0
		});
	}

}

google.maps.event.addDomListener(window, 'load', initialize);