JSFiddle - React, Tailwind, and code Playground

by joeterry

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">one</a></li>
    <li><a href="#tabs-2">two</a></li>
  </ul>
  <div id="tabs-1">
    tab 1
  </div>
  <div id="tabs-2">
    <div id="mapCanvas" style="width:100%; height:500px; "></div>
  </div>
</div>

JavaScript

jQuery('#tabs').tabs();

var pos = new google.maps.LatLng(53.681602, -1.911672); // default.

var mapOptions = {
    center: pos,
    zoom: 10,
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_TOP
    },
    mapTypeControl: false,
    panControl: false,
    scaleControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var marker = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP
});
var hq = "1600 Pennsylvania Ave NW  Washington, DC 20500";
var map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);

loadMap(hq);

function loadMap(address) {
    var geocoder = new google.maps.Geocoder();
    
    geocoder.geocode({
        "address": address
    }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            pos = results[0].geometry.location;
        } else {
            alert("Error : Unable to locate!");
        }

        map.panTo(pos);
        marker.setMap(map);
        marker.setPosition(pos);
    });
}