https://github.com/imranhsayed/google-maps-in-react

:pushpin: Google Maps in React: Autocomplete Location Search | Draggable Marker | Marker Infobox
https://github.com/imranhsayed/google-maps-in-react

autocomplete draggable google google-maps-api infobox javascript location location-search maps maps-api marker marker-tracking react reactjs

Last synced: 21 days ago
JSON representation

:pushpin: Google Maps in React: Autocomplete Location Search | Draggable Marker | Marker Infobox

• Host: GitHub
• URL: https://github.com/imranhsayed/google-maps-in-react
• Owner: imranhsayed
• Created: 2018-11-04T20:18:55.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T22:15:49.000Z (over 2 years ago)
• Last Synced: 2024-12-28T09:04:10.131Z (4 months ago)
• Topics: autocomplete, draggable, google, google-maps-api, infobox, javascript, location, location-search, maps, maps-api, marker, marker-tracking, react, reactjs
• Language: JavaScript
• Homepage: https://codeytek.com/course/google-maps-in-react-course/
• Size: 37 MB
• Stars: 179
• Watchers: 9
• Forks: 93
• Open Issues: 27
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Google Maps in React: Autocomplete Location Search | Draggable Marker | Marker Infobox

******* PLEASE STAR MY REPO TO SUPPORT ME 🙏 ******

Please follow me 🙏 on [twitter](https://twitter.com/imranhsayed) and github

## Description :clipboard:

> Demo App for Autocomplete Location Search, Draggable marker and Infobox using Google Maps API and React .

![](google-maps-image.jpg)

## Autocomplete Location Search Demo :video_camera:

![](google-maps.gif)

## Drag the marker

![](Drag-marker.gif)

## Use :point_right:

1. Get your API Key from [developers.google.com](https://developers.google.com/maps/documentation/javascript/get-api-key).

You can also watch tutorial to [Get API Key](https://www.youtube.com/watch?v=yhhkNtdg5x0&feature=youtu.be)

2. Add your Google Maps Key in `./client/src/client-config.js`

``` ruby

GoogleMapsAPI = 'xxxxx';

```

## Installation Instructions :wrench:

1. Clone the repo using `git clone https://github.com/imranhsayed/google-maps-in-react`

2. `cd google-maps-in-react`

3. `npm install`

4. `cd client`

5. `npm install`

7. `cd ..`

8. `npm run dev`

## Built With :zap:

1. Node

2. Express

3. React

4. Create React App

5. Google Maps API

## Tutorial Videos :video_camera:

* [Get API Key](https://www.youtube.com/watch?v=yhhkNtdg5x0&feature=youtu.be)

* [Autocomplete Location Search | Draggable Marker Part 1](https://youtu.be/4z4hxEHlsxc)

* [Autocomplete Location Search | Draggable Marker Part 2](https://youtu.be/xIYAV6IP4gA)

## Useful Links :link:

* [Autocomplete Location Search Blog](https://codeytek.com/google-maps-in-react-autocomplete-location-search-draggable-marker-marker-infobox/)

## License

[![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org)

- **[MIT license](http://opensource.org/licenses/mit-license.php)**