Google Maps Raster Overlay Example

Google Maps integration in this page uses raster tile overlays. Use StyleJSON in clients that support vector style documents directly. The snippet below uses the streets style ID from Mappinest Styles.

This is an overlay path and not a native StyleJSON renderer.
Swap streets with light, dark, or satellite if needed.

Google Maps overlay

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Google Maps with Mappinest</title>
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    function initMap() {
      const map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 0, lng: 0 },
        zoom: 2
      });

      map.overlayMapTypes.push(new google.maps.ImageMapType({
        getTileUrl: ({ x, y }, zoom) => `https://api.mappinest/styles/streets/${zoom}/${x}/${y}.png?key=YOUR_KEY`,
        tileSize: new google.maps.Size(256, 256),
        name: 'Mappinest'
      }));
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap"></script>
</body>
</html>