Need help with Google Maps Code

Ask the community
,
1

Hi all,

I’ve been working with the following code for an embedded google map:

<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
        
        #map {
            height: 100%;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="map" style="height: 100%; width: 100%;" />
    <script type="text/javascript">
    
    let NYC = {lat: 40.730824, lng: -73.997330};
    
    function RestoreControl(controlDiv, map) {

        var controlUI = document.createElement('div');
            controlUI.style.backgroundColor = '#fff';
            controlUI.style.border = '1px solid #fff';
            controlUI.style.borderRadius = '4px';
            controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
            controlUI.style.cursor = 'pointer';
            controlUI.style.marginBottom = '50px';
            controlUI.style.textAlign = 'center';
            controlUI.title = 'Click to reset the map';
            controlDiv.appendChild(controlUI);

        var controlText = document.createElement('div');
            controlText.style.color = 'rgb(255,226,0)';
            controlText.style.fontFamily = 'Avenir Medium,sans-serif';
            controlText.style.fontSize = '19px';
            controlText.style.lineHeight = '40px';
            controlText.style.paddingLeft = '20px';
            controlText.style.paddingRight = '20px';
            controlText.innerHTML = 'Search this area';
            controlUI.appendChild(controlText);

    controlUI.addEventListener('click', function() {
        map.setCenter(NYC);
        map.setZoom(15);
    });
}
    let locations = null;
    function init() {
        if(locations === null) { // if no locations, let page know
            window.parent.postMessage("hello", "*");
        }
        
    window.onmessage = (event) => {
      if (event.data) {
        locations = event.data.markers;
        let infowindow = new google.maps.InfoWindow();
        let map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
        streetViewControl: true,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_TOP
        },
        mapTypeControl: false,
        scaleControl: false,
        zoomControl: true,
        zoomControlOptions: {
            position: google.maps.ControlPosition.RIGHT_TOP
        },
        center: NYC   //{lat: 40.730824, lng: -73.997330}    
    });

var markers = locations.map(function (location) {
let marker = new google.maps.Marker({
    position: location.position, map: map
})

google.maps.event.addListener(marker, 'click', (function (marker) {
    window.parent.postMessage(location.title, "*");
    map.setOptions({styles: styles['hide']});
}));

return marker;

});

var styles = {
        default: null,
        hide: [
            {
                featureType: 'poi.business',
                stylers: [{visibility: 'off'}]
            },
            {
                featureType: 'poi.government',
                stylers: [{visibility: 'off'}]
            },
            {
                featureType: 'poi.medical',
                stylers: [{visibility: 'off'}]
            },
            {
                featureType: 'poi.school',
                stylers: [{visibility: 'off'}]
            },
            {
                featureType: 'poi.sports_complex',
                stylers: [{visibility: 'off'}]
            },
            {
                featureType: 'poi.place_of_worship',
                stylers: [{visibility: 'off'}]
            },
            {
                featureType: 'transit',
                elementType: 'labels.icon',
                stylers: [{visibility: 'off'}]
            }
        ]
};

var restoreControlDiv = document.createElement('div');
var restoreControl = new RestoreControl(restoreControlDiv, map);
restoreControlDiv.index = 1;

map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(restoreControlDiv);

}
}
}

</script>

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">

</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrI4G3HT1OhrcvDp5PQ2DLMQdS7ugE15I&callback=init">

</script>

</body>

</html>

It works great! The only issue is I want the base map to follow this style:

var styles = {         
default: null,         
hide: [             
    {                 
        featureType: 'poi.business',                
        stylers: [{visibility: 'off'}]             
    },             
    {                 
        featureType: 'poi.government',                 
        stylers: [{visibility: 'off'}]             
    },             
    {                 
        featureType: 'poi.medical',                 
        stylers: [{visibility: 'off'}]             
    },             
    {                 
        featureType: 'poi.school',                 
        stylers: [{visibility: 'off'}]             
    },             
    {                 
        featureType: 'poi.sports_complex',                 
        stylers: [{visibility: 'off'}]             
    },             
    {                 
        featureType: 'poi.place_of_worship',                 
        stylers: [{visibility: 'off'}]             
    },             
    {                 
        featureType: 'transit',                 
        elementType: 'labels.icon',                 
        stylers: [{visibility: 'off'}]             
    }         
] };

No matter how I try to put the style in, the base map will either not load or not load with the correct style type. It will only work when the marker is clicked on. I have tried doing it as a mousein event, but no luck.

Any ideas?

Thank you so much!

P.S sorry for the long code snippets, I tried to clean them up as best I could :slight_smile: