This article will guide you step by step to do the following
- Embed Google Map in your Website (Duh)
- Create Marker(s) in your Google Map
- Change the Icon of Marker(s)
- 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.
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:
This example listens for the click event, gets the latitude and longitude coordinates of the click from…