0

I am new to google maps. Currently working on NExt.js project. I was able to load the maps and get the markers however now I want to try the getFeatureLayer function and color the polygon based on the place_id. However it loads the maps and throws the error map.getFeatureLayer is not a function. Have changed the settings

right now I have only 1 country USA. Eventually I would like to map over the list of countries and color them and also add markers for list cities on the same map.

Here is the CODE :

 import React, { useState, useEffect, useRef } from "react";
    import { Loader } from "@googlemaps/js-api-loader"
    
     const mapOption = {
      center: { lat: 39.80986, lng: -98.555183 },
      zoom: 4,
      minZoom: 2,
      controlSize: 25,
      mapTypeControl: false, // remove the top-left buttons
      streetViewControl: false, // remove the pegman
      mapId:'dda013exxxxxxxxx'
    };
    
   export const MapSection = ({ mapData }) => {
          const [map, setMap] = useState();
        
        useEffect(() => {
            const loader = new Loader({
              apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAP_API_KEY,
              version: "weekly",
              libraries: ["places", "geometry"],
            });
        
            loader
              .load()
              .then(async () => {
                const google = window.google;
                console.log(google)
        
                // Create a map object and specify the DOM element for display.
                //let featureLayer;
        
                if (mapDiv.current && !map) {
                  setMap(
                    new google.maps.Map(mapDiv.current, mapOption,{
                      fullscreenControlOptions: {
                        position: google.maps.ControlPosition.LEFT_BOTTOM,
                      }, // reposition to bottom-left
                    })
                  ); //https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions
                }
                if (map) {
                  console.log(map)
                  const countryLayer = map.getFeatureLayer('COUNTRY');
                  // Define a style with purple fill and border.
                  const featureStyleOptions = {
                    strokeColor: "#810FCB",
                    strokeOpacity: 1.0,
                    strokeWeight: 3.0,
                    fillColor: "#810FCB",
                    fillOpacity: 0.5,
                  };
                  // Apply the style to a single boundary.
                  countryLayer.style =    (options) => {
                    if (options.feature.placeId == "ChIJCzYy5IS16lQRQrfeQ5K5Oxw") {
                      // USA
                      return featureStyleOptions;
                    }
                  };
                } 
        })
              .catch((e) => {
                console.log("Error loading the google map", e.message);
              });
          }, [mapData, map, selectedItems]);
return (
<Grid
        item
        container
        xs={12}
        ref={mapDiv}
        sx={{
          width: "100vw",
          height: "500px",
          margin: "auto",
          overflow: "hidden",
        }}
      />
)}

Ref material: https://cloud.google.com/blog/products/maps-platform/introducing-data-driven-styling https://developers.google.com/maps/documentation/javascript/dds-boundaries/choropleth-map

Vaidehi S
  • 1
  • 1
  • `setMap` is [asynchronous](https://stackoverflow.com/a/58877875/1870780), it won't update `map` immediately. You should store the map in a local variable first `const gMap = new google.maps.Map(...);`, call `setMap(gMap);` then use `gMap` instead of `map` to access the function `const countryLayer = gMap.getFeatureLayer('COUNTRY');`. – juliomalves Jul 27 '22 at 21:47
  • Thanks @juliomalves I tried that way as well and it doesnt work. I have this error: Error loading the google map Cannot read properties of undefined (reading 'COUNTRY'). However I am able to run markers using the map so the map is awailable and I also have the if condition which checks is the map is true or not else getFeatureLayer wont execute. – Vaidehi S Jul 28 '22 at 22:02
  • 1
    ok I found the answer. This was nothing to do with the state. The version of google map loading did not support getFeatureLayer. It looks like this feature only runs on beta version.. Thanks – Vaidehi S Jul 29 '22 at 22:54

0 Answers0