JSFiddle - React, Tailwind, and code Playground

by PeteLopez

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;dummy.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div id="map-canvas"></div>
<br />
<button type="button" class="btn btn-default btn-lg" id="orlando">Orlando</button>
<br /><br />
<button type="button" class="btn btn-default btn-lg" id="jax">Jacksonville</button>

CSS

#map-canvas {
    height: 400px;
    width: 400px;
}

JavaScript

/* BEGIN CODE FROM DOCUMENTATION 
This is straight from the Google Maps API documentation and I set it to default to Orlando */

var map;
function initialize() {
  var mapOptions = {
    zoom: 9,
    center: new google.maps.LatLng(28.4294, -81.3089)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
    console.log(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

/* END CODE FROM DOCUMENTATION */


/* BEGIN CLICK EVENT BINDING */

$(document).ready(function() {
    $('#orlando').on('click', function() {
        map.setCenter(new google.maps.LatLng(28.4294, -81.3089));
    });
    $('#jax').on('click', function() {
        map.setCenter(new google.maps.LatLng(30.4942, -81.6878));
    });
});

/* END CLICK EVENT BINDING */