Создайте и добавьте тип карты стилей с помощью response-google-maps - PullRequest
Новая
       23

Создайте и добавьте тип карты стилей с помощью response-google-maps

2 голосов
/ 11 марта 2019

Я хотел бы иметь меню кнопок стилей карты satellite, roadmap и custom-map.

Я пытался следовать этим руководящим указаниям Google API: https://developers.google.com/maps/documentation/javascript/styling#creating_a_styledmaptype

И применить их к пакету react-google-maps, который я использую в своем приложении реагирования, но не могу заставить его работать,

Можно это сделать?Если да, то как?

Вот мой код: 

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);
...