JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_cMR3YBDntYYS4WlVyqSNFXWKI89k0q0"></script>
<div id="map_canvas"></div>
CSS
html,
body,
#map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0px;
}
JavaScript
function createMarker() {
var canvas, context;
canvas = document.createElement("canvas");
return canvas.toDataURL();
}
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 13,
center: new google.maps.LatLng(56.1304, -106.3468),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.1304, -106.3468),
map: map,
icon: {
url: createMarker()
},
label: {
text: 'My Place',
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(56.1204, -106.3468),
map: map,
icon: {
url: createMarker()
},
label: {
text: 'My Place2',
color: '#000',
fontSize: '14px',
fontWeight: 'bold'
}
});