It's a javascript Class which contains utility methods that simplify working with google maps web SDK

Overview

About GoogleMapsJSHelper

It's a javascript Class which contains utility methods that simplify working with google maps web SDK

Note: i used ES7 Class syntax to build the functionality of this app so you can easily expanded and reuse it

Features

User has the following features provided

  • construct google maps object and draw the map
  • grab current user location and point to that location in the map
  • allow user to drop a marker and get it's coordinates
  • calculate the distance between user's current location and the dropped marker
  • street view

Bundled with Vite

Installation

clone this repository

git clone https://github.com/samialateya/GoogleMapsJSHelper.git

npm install

npm run dev

npm run build

Google Developer Console Setup

  1. login to google developer console and create new project
  2. go to Dashboard and click enable API and Services
  3. find google maps javascript API and click Enable
  4. go to credentials page and click Create Credentials > API Key
  5. copy the key to use it to access google maps SDK
  6. go to index.html line 12. src="https://maps.googleapis.com/maps/api/js?key=your_api_key"

Images

The map | Current location view | Street view

Contributing

Thank you for considering contributing to this repo. Feel free to fork this repo and submit a pull request with your updates.

Errors and Vulnerabilities

Please open an issue on Github if you discover an error on this repo. and feel free to contact me by email at [email protected].

You might also like...

TV Shows Web App - A web application based on an external API which contains information about TV shows

TV Shows Web App - A web application based on an external API which contains information about TV shows. th web app let you like the shows that you like the most and comment what you think about them making use of an involvement API to save this interaction information.

Dec 17, 2022

Utility for generating preview images of StarCraft: Brood War and Remastered maps

bwpreview Utility for generating preview images of StarCraft: Brood War and Remastered maps (.scm and .scx files). All of the actual work of parsing m

Oct 14, 2022

Encode WEB-Dev is a open source project which contains different projects of Html, CSS, Javascript and MERN Stack etc.

HACKTOBERFEST 2022 Encode WEB-Dev is an open source project which contains different projects of Html, CSS, Javascript and MERN Stack etc. which makes

Oct 31, 2022

A browser extension to simplify web pages and hide distracting things like hide cookie banners, auto-playing videos, sidebars, etc

A browser extension to simplify web pages and hide distracting things like hide cookie banners, auto-playing videos, sidebars, etc

Unclutter Browser Extension A browser extension to simplify web pages and hide distracting things like hide cookie banners, auto-playing videos, sideb

Jan 9, 2023

Leader Board is a simple project based on JavaScript programing language. The purpose of this project is to work with APIs and ASYNC & AWAIT methods. I have used vanilla JavaScript with web pack to implement this project

Leader Board is a simple project based on JavaScript programing language. The purpose of this project is to work with APIs and ASYNC & AWAIT methods. I have used vanilla JavaScript with web pack to implement this project

Leader Board - JavaScript Project Table of contents Overview The challenge Screenshot Links Project Setup commands My process Built with What I learne

Oct 21, 2022

A landing page, as well as a results page, that utliize both Yelp API and Google Maps API.

A landing page, as well as a results page, that utliize both Yelp API and Google Maps API.

Economic Eats Group Project #1 Maintained By: Austin Donovan John Hysong John Guzzetta Jahnathan Exantus Description This project contains a landing p

Aug 4, 2022

A Travel companion app using Google Maps API, Travel Search and Weather API

A Travel companion app using Google Maps API, Travel Search and Weather API

Travel Advisor Introduction An advanced Travel Companion Application using Google Maps. With Geolocation, Google Maps API, Searching for places, Fetch

Nov 11, 2022

Cross provider map drawing library, supporting Mapbox, Google Maps and Leaflet out the box

Terra Draw Frictionless map drawing across mapping providers. TerraDraw centralises map drawing logic and provides a host of out the box drawing modes

Dec 31, 2022

A store locator plugin using Google Maps API version 3

jQuery Google Maps Store Locator Plugin The files you're looking for are in the dist/ directory Please see my blog for more information and examples.

Dec 12, 2022
Owner
Sami Alateya
Full-Stack Web Developer PHP, JavaScript Laravel, Vue
Sami Alateya
Google-reviews-crawler - A simple Playwright crawler that stores Google Maps Place/Business reviews to a JSON file.

google-reviews-crawler A simple Playwright crawler that stores Google Maps Place/Business reviews to a JSON file. Usage Clone the repo, install the de

￸A￸l￸e￸x D￸o￸m￸a￸k￸i￸d￸i￸s 6 Oct 26, 2022
simple jquery Plugin that utilizes Google API to get data from a Place on Google Maps

jQuery Plugin to display Google Reviews of a Place on Google Maps this will get the 5 reviews, google offers you. But I need more than 5 reviews! if y

Simon Neutert 32 Dec 14, 2022
Boiler is a utility library that makes every day tasks in JavaScript easier by providing over 115 methods

Boiler is a utility library that makes every day tasks in JavaScript easier by providing over 115 methods that work on arrays, collections, functions, numbers, objects, and strings. It's the JavaScript equivalent of a Swiss Army Knife.

Wil 42 Nov 1, 2022
The iofod SDK provides developers with the ability to interact with the main iofod interface within the Web worker, enabling rapid development of iofod extensions through the SDK.

iofod-sdk English | 简体中文 The iofod SDK provides developers with the ability to interact with the main iofod interface within the Web worker, enabling

iofod, Inc. 47 Oct 17, 2022
It's a repository to studies. Its idea is to learn about Nx and its plugins.

StudyingNx This project was generated using Nx. ?? Smart, Fast and Extensible Build System Adding capabilities to your workspace Nx supports many plug

Open-ish 4 May 13, 2022
Can see everything, beware of its omniscience, kneel before its greatness.

Can see everything, beware of its omniscience, kneel before its greatness. Summary Presentation Installation Removing Credits Presentation Main goal T

Duc Justin 3 Sep 30, 2022
🧩 TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types such as number or boolean (not Value Objects)

?? TypeScript Primitives type TypeScript utility type in order to ensure to return only properties (not methods) containing values in primitive types

CodelyTV 82 Dec 7, 2022
Google-Drive-Directory-Index | Combining the power of Cloudflare Workers and Google Drive API will allow you to index your Google Drive files on the browser.

?? Google-Drive-Directory-Index Combining the power of Cloudflare Workers and Google Drive will allow you to index your Google Drive files on the brow

Aicirou 127 Jan 2, 2023
Movehat is a TypeScript SDK for Move on Sui built on top of Sui's TypeScript SDK and our fork of Ian Macalinao's `move-ts`.

Movehat Movehat is a TypeScript SDK for Move on Sui built on top of Sui's TypeScript SDK and our fork of Ian Macalinao's move-ts. Movehat aspires to b

Pentagon 10 Sep 30, 2022
TV Shows Web App - A web application based on an external API which contains information about TV shows

TV Shows Web App - A web application based on an external API which contains information about TV shows. th web app let you like the shows that you like the most and comment what you think about them making use of an involvement API to save this interaction information.

Williams Colmenares 14 Dec 17, 2022