javascript - react-google-maps getting bigger when clicked - Stack Overflow

admin管理员组

文章数量:1123370

I have a project when I need to use react-google-maps to display multiples public adresses but I'm to do it so when user click on the wanted location the marker would get bigger

Here is my actual code for the Map/Marker part if someone can help please

      <div className="w-full lg:w-800 h-[800px] mt-20">
        <LoadScript
          googleMapsApiKey="////"
          libraries={["places"]}
        >
          <GoogleMap
            mapContainerStyle={{ width: "100%", height: "100%" }}
            center={selectedLocation}
            zoom={16}
            onLoad={(map) => { mapRef.current = map; }}
            options={{streetViewControl: false}}
          >
            {filteredLocations.map((location, index) => (
              <Marker 
              key={index} 
              position={{ lat: location.lat, lng: location.lng }} 
        icon={{
          path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
          fillColor: "#000000",
          fillOpacity: 1,
          scale: 1.5,
        }}
        />
            ))}

I have a project when I need to use react-google-maps to display multiples public adresses but I'm to do it so when user click on the wanted location the marker would get bigger

Here is my actual code for the Map/Marker part if someone can help please

      <div className="w-full lg:w-800 h-[800px] mt-20">
        <LoadScript
          googleMapsApiKey="////"
          libraries={["places"]}
        >
          <GoogleMap
            mapContainerStyle={{ width: "100%", height: "100%" }}
            center={selectedLocation}
            zoom={16}
            onLoad={(map) => { mapRef.current = map; }}
            options={{streetViewControl: false}}
          >
            {filteredLocations.map((location, index) => (
              <Marker 
              key={index} 
              position={{ lat: location.lat, lng: location.lng }} 
        icon={{
          path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
          fillColor: "#000000",
          fillOpacity: 1,
          scale: 1.5,
        }}
        />
            ))}

• javascript
• reactjs
• google-api
• tailwind-css

Share Improve this question Follow edited 12 hours ago VLAZ 28.8k99 gold badges6262 silver badges8282 bronze badges asked 14 hours ago KenKen 1 New contributor Ken is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

you can achieve this by maintaining a state for the selected marker and dynamically updating the icon's scale based on the selected marker. Here's how you can modify your code:

import React, { useState, useRef } from "react";
import { GoogleMap, LoadScript, Marker } from "@react-google-maps/api";

const MapComponent = ({ filteredLocations, selectedLocation }) => {
  const [selectedMarkerIndex, setSelectedMarkerIndex] = useState(null);
  const mapRef = useRef(null);

  const handleMarkerClick = (index) => {
    setSelectedMarkerIndex(index);
  };

  return (
    <div className="w-full lg:w-800 h-[800px] mt-20">
      <LoadScript googleMapsApiKey="////" libraries={["places"]}>
        <GoogleMap
          mapContainerStyle={{ width: "100%", height: "100%" }}
          center={selectedLocation}
          zoom={16}
          onLoad={(map) => {
            mapRef.current = map;
          }}
          options={{ streetViewControl: false }}
        >
          {filteredLocations.map((location, index) => (
            <Marker
              key={index}
              position={{ lat: location.lat, lng: location.lng }}
              icon={{
                path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
                fillColor: "#000000",
                fillOpacity: 1,
                scale: selectedMarkerIndex === index ? 2.5 : 1.5, // Scale changes based on selection
              }}
              onClick={() => handleMarkerClick(index)}
            />
          ))}
        </GoogleMap>
      </LoadScript>
    </div>
  );
};

export default MapComponent;

本文标签： javascriptreactgooglemaps getting bigger when clickedStack Overflow