1

I was looking for a way to create my own mars map in a website, using google maps.

I found this example in google map api

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 1,
    streetViewControl: false,
    mapTypeControlOptions: {
      mapTypeIds: ['moon']
    }
  });

  var moonMapType = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        var normalizedCoord = getNormalizedCoord(coord, zoom);
        if (!normalizedCoord) {
          return null;
        }
        var bound = Math.pow(2, zoom);
        return '//mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw' +
            '/' + zoom + '/' + normalizedCoord.x + '/' +
            (bound - normalizedCoord.y - 1) + '.jpg';
    },
    tileSize: new google.maps.Size(256, 256),
    maxZoom: 9,
    minZoom: 0,
    radius: 1738000,
    name: 'Moon'
  });

  map.mapTypes.set('moon', moonMapType);
  map.setMapTypeId('moon');
}

// Normalizes the coords that tiles repeat across the x axis (horizontally)
// like the standard Google map tiles.
function getNormalizedCoord(coord, zoom) {
  var y = coord.y;
  var 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
  var 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};
}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script
  async
  defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

https://jsfiddle.net/dobleuber/319kgLh4/

It works perfect, but I would like to create the same thing with react using react-google-maps.

I looked out in the react-google-maps code but I only see getters no setters for the map props: getMapTypeId, getStreetView, ect.

Is there any way to achieve this without modify the react-google-maps code?

Thanks in advance

dobleUber
  • 566
  • 6
  • 22
  • 1
    Please see the answer to the same question here https://stackoverflow.com/questions/53139750/can-react-google-maps-use-image-map-types – evan Dec 17 '19 at 18:18

2 Answers2

0

use props mapTypeId="moon" in react-google-maps

cuongdevjs
  • 711
  • 6
  • 15
0

I've found a better way to solve this that preserve the changes on re-render, leaving it here to anyone who comes here.

there is an onLoad function that exposes a map instance, we can use this to set mapTypeId instead of passing it as an option. In this way, if the user changes the map type later, it will preserve the changes on re-render.

<GoogleMap
 onLoad={(map) => {
  map.setMapTypeId('moon');
 }}
/>
Mohib
  • 429
  • 1
  • 9
  • 25