JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<div id="map" class="map" style="height: 400px;"></div>
JavaScript
var googleMap;
var hotelLocation = {
lat: 43.681592,
lng: -79.713612
};
var mapCenter = hotelLocation; //{ lat: 43.690497, lng: -79.966831 };
google.maps.event.addDomListener(window, 'resize', function() {
//http://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive
var center = googleMap.getCenter();
google.maps.event.trigger(googleMap, "resize");
googleMap.setCenter(center);
});
function InitializeGoogleMaps() {
//http://www.latlong.net/convert-address-to-lat-long.html
//90 Biscayne Crescent, Brampton, ON - Address of Hotel - { lat: 43.681592, lng: -79.713612 };
googleMap = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: mapCenter
});
var marker = new google.maps.Marker({
position: hotelLocation,
map: googleMap,
title: 'Courtyard by Marriott'
});
}
InitializeGoogleMaps();
//google.maps.event.addDomListener(window, 'load', InitializeGoogleMaps);