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" id="two">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();

$('#two').click(function () {
    init();
});

var map, marker;

function init() {
    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 hq = "1600 Pennsylvania Ave NW  Washington, DC 20500";
    map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
    
    marker = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP
    });

    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);
    });
}