Skip to content

Commit

Permalink
feat: removed google maps marker & using advanced marker as suggsted …
Browse files Browse the repository at this point in the history
…by google
  • Loading branch information
kashaudhan committed Apr 29, 2024
1 parent 4915419 commit 454017a
Show file tree
Hide file tree
Showing 12 changed files with 7,192 additions and 6,284 deletions.
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,6 @@
node_modules
.cache
dist
.parcel-cache/
.parcel-cache/

*.env
51 changes: 15 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

# react-gmap-picker

React google maps location picker/marker (latitude, longitude)
React google maps location picker/marker with `Advanced Marker`


## Table of Contents
Expand All @@ -27,12 +27,14 @@ yarn add react-gmap-picker

```jsx
import { useState } from 'react';
import { Picker } from 'react-gmap-picker';
import { Picker } from '../src';
import React from 'react';

const INITIAL_LOCATION = { lat: 13.4, lng: 77.0 };
const INITIAL_ZOOM = 10;

const API_KEY = process.env.API_KEY as string;

const App = () => {
const [defaultLocation, setDefaultLocation] = useState(INITIAL_LOCATION);
const [location, setLocation] = useState(defaultLocation);
Expand Down Expand Up @@ -62,34 +64,17 @@ const App = () => {
<label>Zoom:</label>
<input type="text" value={zoom} disabled />

<div className="row">
<div className="column">
<h4>Map 1 (roadmap)</h4>
<Picker
defaultLocation={defaultLocation}
zoom={zoom}
mapTypeId="roadmap"
style={{ height: '700px' }}
onChangeLocation={handleChangeLocation}
onChangeZoom={handleChangeZoom}
apiKey="AIzaSyD07E1VvpsN_0FvsmKAj4nK9GnLq-9jtj8"
/>
</div>
{/* With custom icon & always fixed marker in center */}
<div className="column">
<h4>Map 2 (satellite)</h4>
<Picker
defaultLocation={defaultLocation}
zoom={zoom}
mapTypeId="satellite"
style={{ height: '700px' }}
onChangeLocation={handleChangeLocation}
onChangeZoom={handleChangeZoom}
alwaysCentered={true}
icon={'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'}
apiKey="AIzaSyD07E1VvpsN_0FvsmKAj4nK9GnLq-9jtj8"
/>
</div>
<div>
<h4>Map 1 (roadmap)</h4>
<Picker
defaultLocation={defaultLocation}
zoom={zoom}
mapTypeId="roadmap"
style={{ height: '700px' }}
onChangeLocation={handleChangeLocation}
onChangeZoom={handleChangeZoom}
apiKey={API_KEY}
/>
</div>
</div>
);
Expand All @@ -111,10 +96,4 @@ export default App;
| `style` | `any` | { width: '100%', height: '600px' } | Map container style. |
| `className` | `string` | undefined | Map className. |
| `mapTypeId` | [google.maps.MapTypeId](https://developers.google.com/maps/documentation/javascript/maptypes) | undefined | Map type you want to see. |
| `icon` | `string \| null \| undefined ` \| [google.maps.Icon](https://developers.google.com/maps/documentation/javascript/examples/icon-simple) \| [google.maps.Symbols](https://developers.google.com/maps/documentation/javascript/symbols) | undefined | Marker icon. |
| `alwaysCentered` | `boolean` | false | Fix marker in center if `true`. |


A special thanks to @phamtung1 for inspiration:

[![](https://avatars.githubusercontent.com/u/11594890?v=4&size=20)](https://github.com/phamtung1)
43 changes: 13 additions & 30 deletions example/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import React from 'react';
const INITIAL_LOCATION = { lat: 13.4, lng: 77.0 };
const INITIAL_ZOOM = 10;

const API_KEY = process.env.API_KEY as string;

const App = () => {
const [defaultLocation, setDefaultLocation] = useState(INITIAL_LOCATION);
const [location, setLocation] = useState(defaultLocation);
Expand Down Expand Up @@ -34,36 +36,17 @@ const App = () => {
<label>Zoom:</label>
<input type="text" value={zoom} disabled />

<div className="row">
<div className="column">
<h4>Map 1 (roadmap)</h4>
<Picker
defaultLocation={defaultLocation}
zoom={zoom}
mapTypeId="roadmap"
style={{ height: '700px' }}
onChangeLocation={handleChangeLocation}
onChangeZoom={handleChangeZoom}
apiKey="AIzaSyD07E1VvpsN_0FvsmKAj4nK9GnLq-9jtj8"
/>
</div>

<div className="column">
<h4>Map 2 (satellite)</h4>
<Picker
defaultLocation={defaultLocation}
zoom={zoom}
mapTypeId="satellite"
style={{ height: '700px' }}
onChangeLocation={handleChangeLocation}
onChangeZoom={handleChangeZoom}
alwaysCentered={true}
icon={
'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
}
apiKey="AIzaSyD07E1VvpsN_0FvsmKAj4nK9GnLq-9jtj8"
/>
</div>
<div>
<h4>Map 1 (roadmap)</h4>
<Picker
defaultLocation={defaultLocation}
zoom={zoom}
mapTypeId="roadmap"
style={{ height: '700px' }}
onChangeLocation={handleChangeLocation}
onChangeZoom={handleChangeZoom}
apiKey={API_KEY}
/>
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@

<body>
<div id="root"></div>
<script src="./index.tsx"></script>
<script type="module" src="./index.tsx"></script>
</body>
</html>
1 change: 0 additions & 1 deletion example/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
Expand Down
Loading

0 comments on commit 454017a

Please sign in to comment.