JSFiddle - React, Tailwind, and code Playground
by barteloma
HTML
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing,places&extension=.js"></script>
<body>
<div id="map-canvas" style="height:250px; width:500px"></div>
<button id="capture">capture</button>
<div id="canvas" ></div>
</body>
JavaScript
jQuery(document).ready(function () {
var map;
var centerPosition = new google.maps.LatLng(40.747688, -74.004142);
var style = [{
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}]
}, {
"featureType": "road.arterial",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "road.highway",
"stylers": [{
"visibility": "on"
}, {
"color": "#fee379"
}]
}, {
"featureType": "landscape",
"stylers": [{
"visibility": "on"
}, {
"color": "#f3f4f4"
}]
}, {
"featureType": "water",
"stylers": [{
"visibility": "on"
}, {
"color": "#7fc8ed"
}]
}, {}, {
"featureType": "road",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#83cead"
}]
}, {
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [{
"weight": 0.9
}, {
"visibility": "off"
}]
}]
var options = {
zoom: 16,
center: centerPosition,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map-canvas')[0], options);
map.setOptions({
//styles: style
});
var image = {
url:...