Breaking News: Grepper is joining You.com. Read the official announcement!

update on zoom is not working google-map-react

Mystic Dev answered on February 25, 2022 Popularity 4/10 Helpfulness 1/10

answer update on zoom is not working google-map-react

related update on zoom is not working google-map-react

update on zoom is not working google-map-react

Comment

import { useState, useEffect, useRef } from "react";
import "./App.css";
import GoogleMapReact from "google-map-react";
import json from "./json/dataValue.json";
import marker from "./asset/marker.png";

const InfoWindow = (props) => {
  const { place } = props;
  const infoWindowStyle = {
    position: "relative",
    bottom: 150,
    left: "-45px",
    width: 220,
    backgroundColor: "white",
    boxShadow: "0 2px 7px 1px rgba(0, 0, 0, 0.3)",
    padding: 10,
    fontSize: 14,
    zIndex: 100,
  };

  return (
    <div style={infoWindowStyle}>
      <div style={{ fontSize: 16 }}>{place.name}</div>
      <div style={{ fontSize: 14 }}>
        <span style={{ color: "grey" }}>{place.rating} </span>
        <span style={{ color: "orange" }}>
          {String.fromCharCode(9733).repeat(Math.floor(place.rating))}
        </span>
        <span style={{ color: "lightgrey" }}>
          {String.fromCharCode(9733).repeat(5 - Math.floor(place.rating))}
        </span>
      </div>
      <div style={{ fontSize: 14, color: "grey" }}>{place.types[0]}</div>
      <div style={{ fontSize: 14, color: "grey" }}>
        {"$".repeat(place.price_level)}
      </div>
      <div style={{ fontSize: 14, color: "green" }}>
        {place.opening_hours.open_now ? "Open" : "Closed"}
      </div>
    </div>
  );
};

// Marker component
const Marker = ({ show, place }) => {
  const markerStyle = {
    border: "1px solid white",
    borderRadius: "50%",
    height: 10,
    width: 10,
    backgroundColor: show ? "red" : "blue",
    cursor: "pointer",
    zIndex: 10,
  };

  return (
    <>
      {/* <div style={markerStyle} /> */}
      {/* {show && <InfoWindow place={place} />} */}
      <img src={marker} alt="marker" width={20} style={{ cursor: "pointer" }} />
    </>
  );
};

function App() {
  const [data, setData] = useState({});
  const [defaultProps, setDefault] = useState({
    center: {
      lat: 34.0522,
      lng: -118.2437,
    },
    zoom: 10,
  });
  const mapRef = useRef();

  useEffect(() => {
    setData(json);
  }, []);

  const onChildClickCallback = (key, childProps) => {
    setDefault({
      center: {
        lat: childProps?.lat,
        lng: childProps?.lng,
      },
      zoom: 14,
    });
  };

  const onChange = ({ center, zoom }) => {
    setDefault({
      center: {
        lat: center?.lat,
        lng: center?.lng,
      },
      zoom: zoom,
    });
  };

  return (
    <div style={{ height: "100vh", width: "100%" }}>
      {data?.length !== undefined && (
        <GoogleMapReact
          bootstrapURLKeys={{
            key: "key",
            libraries: ["places", "geometry", "drawing", "visualization"],
          }}
          center={defaultProps.center}
          zoom={defaultProps?.zoom}
          onChildClick={onChildClickCallback}
          onChange={onChange}
          ref={mapRef}
          options={{
            streetViewControl: true,
            draggable: true, // make map draggable
            zoomControlOptions: { position: 9 },
            keyboardShortcuts: true, // disable keyboard shortcuts
            scaleControl: true, // allow scale controle
            scrollwheel: true, // allow scroll wheel
            // styles: mapsStyle, // change default map styles,
            zoomControl: true,
            minZoom: 3,
            maxZoom: 16,
          }}
        >
          {data?.map((place) => (
            <Marker
              key={place?.["Project#"]}
              lat={place?.Latitude}
              lng={place?.Longitude}
              show={true}
              place={place}
            />
          ))}
        </GoogleMapReact>
      )}
    </div>
  );
}

export default App;

Popularity 4/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: google-map-react javascript

Link to this answer
Share Copy Link

Contributed on Feb 25 2022

Mystic Dev

0 Answers Avg Quality 2/10

Closely Related Answers

update on zoom is not working google-map-react

Comment

class SimpleMap extends React.Component {
  state = {
    center: [60.938043, 30.337157],
    zoom: 9,
    markerLat: 60.955413,
    markerLng: 30.337844
  };

  componentDidMount() {
    this.anim = setInterval(() =>
      this.setState({
          markerLat: 60.955413+Math.random()*0.2,
          markerLng: 30.337844+Math.random()*0.2
      })
      ,1)
  }

  componentWillUnmount() {
    clearInterval(this.anim);
  }

  _onChange = ({center, zoom}) => {
    console.log(center);
    this.setState({
      center: center,
      zoom: zoom,      
    });
  }

  render() {
    return (
       <GoogleMapReact
        onChange={this._onChange}
        center={this.state.center}
        zoom={this.state.zoom}>
        <div className="place" lat={this.state.markerLat} lng={this.state.markerLng}>MyPlace</div>
      </GoogleMapReact>
    );
  }
}


ReactDOM.render(
  <div style={{width: '100%', height: 400}}>
    <SimpleMap/>
  </div>,
  document.getElementById('main')
);

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: google-map-react javascript

Link to this answer
Share Copy Link

Contributed on Feb 25 2022

Mystic Dev

0 Answers Avg Quality 2/10

update on zoom is not working google-map-react

Contents

More Related Answers

update on zoom is not working google-map-react

Closely Related Answers

update on zoom is not working google-map-react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.