2

I would like to have a satellite, a roadmap and a custom-map map styles button menu available.

I tried to follow those google api guide lines: https://developers.google.com/maps/documentation/javascript/styling#creating_a_styledmaptype

And apply them to the react-google-maps package that I use in my react application, but I can't make it work.

It is possible to do so? If yes, how?

Here is my code: 

import React from 'react';
import { GoogleMap, withGoogleMap, withScriptjs } from 'react-google-maps';
import { compose, withProps } from 'recompose';

const MyMap = () => {
    const styledMapType = new google.maps.StyledMapType(
       [
          {
            elementType: 'geometry',
            stylers: [{ color: '#ebe3cd' }],
          },
          {
            elementType: 'labels.text.fill',
            stylers: [{ color: '#523735' }],
          },
          // other properties
       ],
       { name: 'custom-map' }
    );

    const defaultOptions = {
       mapTypeControlOptions: {
          position: google.maps.ControlPosition.RIGHT_TOP,
          mapTypeIds: ['roadmap', 'satellite', 'custom-map'],
        },
        fullscreenControl: false,
        streetViewControl: false,
    };

    const mapRef = useRef(null);

    return <GoogleMap
            key="custom-map"
            defaultOptions={defaultOptions}
            ref={mapRef}
           />
}

export default compose(
    React.memo,
    withProps({
        containerElement: <div style={{ height: '100%' }} />,
        googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&key=my-key&libraries=geometry',
        loadingElement: <div style={{ height: '100%' }} />,
        mapElement: <div style={{ height: '100%' }} />,
    }),
    withScriptjs,
    withGoogleMap,
)(MyMap);
louis amoros
  • 2,418
  • 3
  • 19
  • 40
  • And what doesn't work? – MrUpsidown Mar 11 '19 at 11:23
  • The name (`custom-map`) you set in the `new google.maps.StyledMapType` is the "display name" or what will appear in your control. It is not the same as the `mapTypeIds` you declared (`custom-map`). You need to link the 2 together with `map.mapTypes.set('custom-map', styledMapType);` see working example [here](http://jsfiddle.net/upsidown/Lt2Ey/). – MrUpsidown Mar 11 '19 at 11:35
  • Yes I agree with your example. But how, with the `react-google-maps`, do you set the map types? – louis amoros Mar 11 '19 at 14:55
  • I did not find anything in the documentation: https://tomchentw.github.io/react-google-maps/ – louis amoros Mar 11 '19 at 14:57
  • My bad... I found right there: https://github.com/tomchentw/react-google-maps/issues/490#issuecomment-361591341 – louis amoros Mar 11 '19 at 15:05

0 Answers0