JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div> <!-- INFO PAGE -->
	<div data-role="collapsible-set">
        <div data-role="collapsible" align="center" data-content-theme="g" id="collapse-id">
            <h3>Find us</h3> <!-- Heading -->							
            <div id="map-canvas" style="width:200px;height:200px;"></div>
        </div>
    </div>
</div>

JavaScript

/* this variable MUST be outside function so it would be in global scope */
var map;
function initialize() {

    var myLatlngCenter = new google.maps.LatLng(51.865,-2.3); <!-- Center point -->
        
        var myLatlng1 = new google.maps.LatLng(51.845058,-2.15137);
    
    var mapOptions = {
        zoom: 9,
        center: myLatlngCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
    
    var marker1 = new google.maps.Marker({
        position: myLatlng1,
        map: map,
        title: '1'
    });
}


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

$('#collapse-id').on('expand', function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
});