CODEWITHSUNDEEP
reactjs
John Shelby
John Shelby

Reputation: 102

React Google Maps not opening on specified lat, long, but in random place

This is the code for the maps component. Any ideas why it doesn't open straight on those coordinates? Is there another prop that I didn't set on true?

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class SimpleMap extends Component {
  static defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11,
    yesIWantToUseGoogleMapApiInternals: true
  };

  render() {
    return (
      <div style={{ height: '50vh', width: '35%', justifyContent: 'flex-end' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key:"my key" }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
          yesIWantToUseGoogleMapApiInternals
          lat={45.756659}
          lng={21.228703}
        >
          <AnyReactComponent
            lat={45.756659}
            lng={21.228703}
            text="Service Location"
          />
        </GoogleMapReact>
      </div>
    );
  }
}

Upvotes: 0

Views: 996

Answers (1)

Dan
Dan

Reputation: 396

I believe what you are asking is this: Why isn't the map moving to the new marker location?

If this is what you are asking, it is because you aren't changing your center coords, and so it stays where you originally set it.

Checkout this code sandbox where I set the center value using a ternary expression to the new location, and the map goes to where the marker is. https://codesandbox.io/s/wonderful-cdn-nqizf?file=/src/App.js:1177-1204

you'll want to actually set it using state in a real project. But this for proof of concept.

Upvotes: 1

Related Questions