ReadtyMap - Speak to Google Maps to find your location.
Tags: hackwithdg, deepgram, voicesearch, googlemap
Published: 2022-04-10 17:42:04

---
title: ReadtyMap - Speak to Google Maps to find your location.
published: true
description: Implement voice search feature in Google Map
tags: hackwithdg, deepgram, voicesearch, googlemap
---

### Overview of My Submission
![ReadtyMap](https://github.com/phonist/readtymap/blob/master/public/assets/readtymap.png?raw=true)

ReadtyMap is a tool that can search for a location by voice, as well as by typing and searching. Deepgram and Google Maps are the technologies being used here.

Sometimes people are just lazy when it comes to typing. People frequently use Google Maps to find the location in many everyday situations. Despite the fact that there are many similar apps available, it is still worthwhile to create a simple one.


### Submission Category: 

Wacky Wildcards


### Link to Code on GitHub
{% embed https://github.com/phonist/readtymap %}

### Prerequisites
* Node - 16.2.0
* Yarn - 1.22.17
* Deepgram acount
* Google Maps API key

### Installation
1. git clone https://github.com/phonist/readtymap
2. cd readtymap
3. create .env file at root directory and assign value to these keys:
```
NEXT_PUBLIC_GOOGLE_API_KEY_MAPS=<your google maps api key>
NEXT_PUBLIC_DEEPGRAM_API_KEY=<your deepgram api key>
```
3. yarn dev
4. navigate to localhost:3000 and start your development

##Getting Started
### Use Voice
![Search Bar](https://github.com/phonist/readtymap/blob/master/public/assets/searchbar.png?raw=true)

1. Click on the microphone icon.
2. Start speaking when page showing 'Listening'.
3. Stop speaking when page shows 'Searching'.
4. ReadtyMap will show the location.

### Development
The majority of the time, development takes place in `src/components/Map/`, where the keys feature is used.

The deepgram.ts in `pages/api/deepgram.ts` is used for the speech to text feature, which is called by function in `src/components/Map/Autocomplete.tsx`.

Meanwhile, the Google Maps API is used for the map feature, which is called by function in `src/components/Map/GoogleMap.tsx`.

The project structure are depicts below. 
```
pages/
|-- api/
  |-- deepgram.ts
|-- index.tsx
|-- _app.tsx
|-- Map.tsx
redux/
|-- reducers/
|-- actions/
|-- thunks/
|-- types/
      |-- interfaces/
|-- reducers.ts
|-- store.ts
src/
|-- components/
  |-- Map/
    |-- Autocomplete.tsx
    |-- GoogleMap.tsx
    |-- Pointer.tsx
|-- Listening.tsx
|-- Loading.tsx
|-- Searching.tsx
```
* Deepgram.ts is Deepgram's API interface. 
* All UI components are stored in the `src` folder. 
* All redux logic is stored in the `redux` folder. 
* All typescript interfaces are kept in the folders `types` and `types/interfaces.`

### Conclusion
The project is host on [readtymap](https://readtymap.vercel.app/)

The first thing that came to mind when I saw that Dev + Deepgram was hosting a hackathon was what I could do with the speech to text API.

Despite the fact that there are numerous similar apps, the first idea that comes to mind is to use voice to search for locations, creating a simple one is still worthwhile.

Developers who want to learn more about Deepgram's speech to text feature can use ReadtyMap as a starting point.
Thank you for providing this platform for us to explore additional software possibilities, Deepgram. :D