CODEWITHSUNDEEP
javascriptreactjsgoogle-mapsgoogle-maps-react
user10821947
user10821947

Reputation:

Google maps marker size with react

I am currently working on a google-maps project using google-maps-react and I have come across a problem. I am using props to get the values of my marker (lat, lng, marker icon) however I am having trouble changing the size of the marker. I am left with an enormous marker and not able to change this. I have tries to pass the size as a prop but without success.
Thank you in advance for any help.

Here is my code:

MAPS.JS

render() {
    /*--- initial code that i passed into props*/
     /*var icon = {
     url: "https://loc8tor.co.uk/wp-content/uploads/2015/08/stencil.png", // url
    scaledSize: new this.props.google.maps.Size(90, 42), // scaled size
    */
     }
 return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={4}
          initialCenter={this.props.center}
        >
          {this.props.places.map((place, i) => {
              //pass an array of markers as a child to the GoogleMap component and map over them
            return (
              <Marker
                onClick={this.onMarkerClick}
                key={place.id}
                place_={place}
                position={{ lat: place.lat, lng: place.lng }}
                icon={place.url}
                //Size={place.scaledSize} : Not working
              />
            );
          })}
          <InfoWindowEx
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}
          >
            <div>
              <h3>{this.state.selectedPlace.name}</h3>
              <button
                type="button"
                onClick={this.showDetails.bind(this, this.state.selectedPlace)}
              >

                Show details
              </button>
            </div>
          </InfoWindowEx>
        </Map>
      </div>
    );

INDEX.JS

import React from "react";
import ReactDOM from "react-dom";
import Map from "./Map";

import "./styles.css";

const data = [
  {
    name: "Hello",
    title: "Sydney",
    lat: -33.847927,
    lng: 150.6517938,
    id: 1,
    color: "blue",
    url: "https://loc8tor.co.uk/wp-content/uploads/2015/08/stencil.png",
    // scaledSize: Size(90, 42), // scaled size - Not working//
     },
  {

Upvotes: 2

Views: 4719

Answers (1)

evan
evan

Reputation: 5691

The scaledSize parameter must be added to your marker's icon property along with the url parameter as per the library's docs and Google's docs.

So if you have this object containing both parameters:

var icon = {
  url: "https://loc8tor.co.uk/wp-content/uploads/2015/08/stencil.png",
  scaledSize: new this.props.google.maps.Size(90, 42)
};

Pass them both to your marker's icon property together as an object as follows:

<Marker
  onClick={this.onMarkerClick}
  key={place.id}
  place_={place}
  position={{ lat: place.lat, lng: place.lng }}
  icon={icon}
/>

I have tested your code with the above changes and your blue marker displays correctly at the specified size. So hope this helps you!

Upvotes: 2

Related Questions