JSFiddle - React, Tailwind, and code Playground
by Alex Azuero
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Include Google Maps JS API -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPDM6cvLGRULvbDkNczYENVKeGYxDXdzA&sensor=false">
</script>
<style type="text/css">
#mapDiv { width: 800px; height: 500px; }
</style>
<!-- Map creation is here -->
<script type="text/javascript">
//Defining map as a global variable to access from other functions
var map;
function initMap () {
//Enabling new cartography and themes
google.maps.visualRefresh = true;
//Setting starting options of map
var mapOptions = {
center: new google.maps.LatLng(38.922558, -77.039215),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Getting map DOM element
var mapElement = document.getElementById('mapDiv');
//Creating a map with DOM element which is just obtained
map = new google.maps.Map(mapElement, mapOptions);
//Start listening for button click events.
startButtonEvents();
} //End INIT
//=============================================
//1Function that start listening the click events of the buttons.
function startButtonEvents () {
document.getElementById('Geolocate').addEventListener('click', function(){
Geolocate();
});
document.getElementById('zoomToDC').addEventListener('click', function(){
zoomToStreet();
});
document.getElementById('btnDisableDrag').addEventListener('click', function(){
disableDrag();
...