Snazzy maps is being flakey

Design help Custom code
1

Hi there, hope somebody can see what’s going on here. We’re using an embedded Snazzy Map here at the bottom of the page https://www.kidzandcrayonz.co.nz/

It seems ok most of the time but for about 30% of page loads we get an error message saying ‘This page didn’t load Google Maps correctly. See the JavaScript console for technical details.’

The Console also says ‘Google Maps JavaScript API warning: RetiredVersion’. Is this referring to the Snazzy Maps script? And if yes, has anybody found a way of fixing this?

Cheers
Grant

2

Hi @grantsenior,

There is something wrong about the way the map is being generated. I’ve rebuild from scratch your map using a div, the regular google maps API script and a simple piece of javascript snipet to initialise the map. I’ve tested it out, all is running fine, no warnings anymore.

here is the codepen

here is the HTML

<div id="map"></div>

<!-- Google Maps API Key  -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBt-68-RkZqWwMoBg-fPvD4Wiwc4UwiQ2I&language=en&region=us&callback=initMap"></script>

here is the CSS

#map {
  height: 400px;
  width: 100%;
}

here is the javascript

// initMap callback
function initMap() {
  // globals
  const snazzy = [], // YOUR SNAZZY MAP STYLE GOES HERE 
    zoom = 15,
    lat = -36.957712,
    lng = 174.814596,
    mapType = "roadmap",
    latMarker = -36.957515,
    lngMarker = 174.814617,
    markerUrl =
      "https://snazzy-maps-cdn.azureedge.net/assets/marker-5a5652f8-255a-4378-9674-353d907a62aa.png";
  // create map
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: zoom,
    center: {
      lat: lat,
      lng: lng
    },
    mapTypeControl: false,
    mapTypeId: mapType,
    gestureHandling: "cooperative",
    fullscreenControl: false,
    styles: snazzy
  }); // end map
  // define marker
  const markerOptions = {
    map: map,
    position: {
      lat: latMarker,
      lng: lngMarker
    },
    icon: {
      url: markerUrl,
      scaledSize: new google.maps.Size(162, 80),
      size: new google.maps.Size(162, 80),
      anchor: new google.maps.Point(18, 80)
    },
    options: {
      optimized: true
    }
  };
  // create marker
  const marker = new google.maps.Marker(markerOptions);
} // end initMap()

Screenshot (298)
Screenshot (298)1920×1080 414 KB

Hope that helps.

3

Wow! Thanks Anthony! That is indeed, super handy. I appreciate it very much.

Cheers
Grant

1 Like