I had no better images for the cover image. So I just captured to the Docs page 😆

Google Map API | Vanilla JavaScript

This article will guide you step by step to do the following

  1. Embed Google Map in your Website (Duh)
  2. Create Marker(s) in your Google Map
  3. Change the Icon of Marker(s)
  4. Click to Get Co-ordinates of the location

Embed Google Map in your Website

To embed Google Maps on your website. Your HTML and js code should look like this.

I have just used the API provided by google map. If you want to learn more about this code. Visit here.

Create Marker(s) in Your Google Map.

To create a marker in google map you need to instantiate
Marker class under google.maps namespace.

Create Marker

The code above will only create a marker. You need to call the setMap function on the marker.

in the setMap function, the instance of Map is expected.

Create Multiple Markers

To create multiple markers, you just have to create multiple instances of Marker class and simply embed it as shown in the code below.

Use the Custom Icon in Map Marker

Using the Custom Icon is no different than embedding a normal marker. Just a little tweak in a code.

You just need to add icon property in the object in Marker’s constructor. replace new-image.png with image URL you want to keep as a custom icon.

Click To get the coordinates of the location in Map

Here is the main part. The main motive of me for writing this article is for me to keep referring to the code of getting the coordinates of a location on the map.

I am adding the bonus point to this article just as a use case of google map API

Bonus: Dynamic Marker Position

You just need to add a click event in the map using the addListener

As shown in the code above, the e object comes with latLng property which is an object and contains lat and lng method which returns the latitude and longitude of the location clicked with the mouse. easy-peasy?

Okay, I hope you learned the google maps api functions to embed a basic interactive google map on your website.

If you find any mistake in my code above. Be sure to provide feedback. I would really appreciate that.

Some useful links for google map API:

Creator ✍ | Web3, SaaS, Javascript | Branding | Crypto | NFTs 🚀