JSFiddle - React, Tailwind, and code Playground
by Lawrence Ross
HTML
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<div class="map"></div>
CSS
body, html {
width: 100%;
height: 100%;
}
.map {
width: 100%;
height: 100%;
}
JavaScript
function initialize() {
/*Maps*/
var map = new GMaps({
div: '.map',
lat: 0,
lng: 0,
zoom: 0
});
GMaps.geocode({
address: "San Diego, CA",
callback: function(results, status) {
if (status == 'OK') {
var latlng = results[0].geometry.location;
map.fitBounds(results[0].geometry.viewport);
map.addMarker({
lat: latlng.lat(),
lng: latlng.lng()
});
}
}
});
}
google.maps.event.addDomListener(window, "load", initialize);