CODEWITHSUNDEEP
reactjsgoogle-maps
M Hamza Zahid
M Hamza Zahid

Reputation: 1

Unable to load multiple markers on react-google-maps using map function

I am having trouble while rendering multiple markers on the google map through the map function as the markers which I have hard coded are shown on the map while the dataArr array containing lat and lng of different places which I am trying to pass to marker and then returning it are not shown on the map there is no error also I can't figure out why then markers are not being shown on the map for the lat and lng of different places.`

import { SettingsSystemDaydreamTwoTone } from "@material-ui/icons";
import React, { useEffect, useState } from "react";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from "react-google-maps";
let dataArr = [];
const Map = () => {
  return (
    <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
      <Marker position={{ lat: -34.397, lng: 150.644 }} />
      <Marker position={{ lat: -35.397, lng: 151.644 }} />
      {dataArr.map((el, i) => {
        return <Marker key={i} position={{ lat: el.lat, lng: el.lng }} />;
      })}
    </GoogleMap>
  );
};

const setData = (data) => {
  console.log(data);
  dataArr = data;
  Map();
};
let WrapperMap = withScriptjs(withGoogleMap(Map));
const MapComp = (props) => {
  useEffect(() => {
    setData(props.results);
  }, [props.results]);
  return (
    <div>
      <WrapperMap
        googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyAduxOyZEAyoz4mLWTgTobz_7lfDNoc-_I"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  );
};
export default MapComp;

enter image description here

Upvotes: 0

Views: 660

Answers (1)

Nizar
Nizar

Reputation: 722

Try removing the return statement and the curled brackets before the <Marker...> tag as shown below

 <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
      <Marker position={{ lat: -34.397, lng: 150.644 }} />
      <Marker position={{ lat: -35.397, lng: 151.644 }} />
      {dataArr.map((el, i) => 
        <Marker key={i} position={{ lat: el.lat, lng: el.lng }} />;
      )}
    </GoogleMap>

Upvotes: 0

Related Questions