getTileUrl

I want to get images from local url, I did this before with pure js something like this :

    var carte = new google.maps.ImageMapType({
        getTileUrl: function (tileCoord, zoom) {
            return 'http://localhost/' + (zoom + 1) + "/" + (tileCoord.x + 1) + ":" + (tileCoord.y + 1) + "/tile.png";
        }, 
        tileSize: new google.maps.Size(256, 256),  
        minZoom: 8,
    });

how can I override getTileUrl here with react ?

[istarkov]

I have no idea why any part of gmap api is not working 😃

[cresenciof]

This works for me using ImageMapTypes and

• google-map-react ^2.1.10
• React 17
• NextJS 12

import GoogleMapReact from 'google-map-react';
import React, { FC, Fragment, useEffect, useRef } from 'react';

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.

type Coord = {
  x: number;
  y: number;
};

const getNormalizedCoord = (coord: Coord, zoom: number): Coord | null => {
  const y = coord.y;
  let x = coord.x;
  // tile range in one direction range is dependent on zoom level
  // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
  const tileRange = 1 << zoom;

  // don't repeat across y-axis (vertically)
  if (y < 0 || y >= tileRange) {
    return null;
  }

  // repeat across x-axis
  if (x < 0 || x >= tileRange) {
    x = ((x % tileRange) + tileRange) % tileRange;
  }
  return { x: x, y: y };
};

const Marker: FC<{ lat: number; lng: number }> = ({ children }) => (
  <Fragment>{children}</Fragment>
);

const CustomMap: FC = () => {
  const defaultProps = {
    center: {
      lat: 10.99835602,
      lng: 77.01502627,
    },
    zoom: 11,
  };

  const updateMaptile = (map: any, maps: any) => {
    if (!map || !maps) {
      return;
    }
    const moonMapType = new maps.ImageMapType({
      getTileUrl: function (coord: Coord, zoom: number): string {
        const normalizedCoord = getNormalizedCoord(coord, zoom);

        if (!normalizedCoord) {
          return '';
        }

        const bound = Math.pow(2, zoom);

        return (
          'https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' +
          '/' +
          zoom +
          '/' +
          normalizedCoord.x +
          '/' +
          (bound - normalizedCoord.y - 1) +
          '.jpg'
        );
      },
      tileSize: new maps.Size(156, 156),
      maxZoom: 9,
      minZoom: 0,
      // @ts-ignore TODO(jpoehnelt) 'radius' does not exist in type 'ImageMapTypeOptions'
      radius: 1738000,
      name: 'Moon',
    });
    map.mapTypes.set('moon', moonMapType);
    map.setMapTypeId('moon');
    map.setZoom(1);
  };


  return (
    <div style={{ height: '70vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: process.env.NEXT_PUBLIC_MAPS_API_KEY || '' }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
        onGoogleApiLoaded={({ map, maps }) => {
          updateMaptile(map, maps)
        }}
      >
        <Marker {...defaultProps.center}>
          <h1>Hi!</h1>
        </Marker>
      </GoogleMapReact>
    </div>
  );
};

export default CustomMap;