How to use/configure Google Maps API in your application?

Requirement:- We need to implement google maps in our application, how we can configure that.
Note:- We can use the below approach to generate API key(lat and lng values) and need to install dedependency for adding google api in Vue.js project.

Step1:-Generate maps Key to use Google API
 a) Click the “GET A KEY” button
 b) Create the project/or use existing project
create map api project
 c) Enable API and we are done with key creation

create new project in google map api

Step2: Using Google guide and copy the html code into index.html file

 a)Replace the API key generated in above steps as below
 b)Run the index.html file and we are done.
change map key in api
Note:- In run results of Step2, we got some random place in Australia but we don’t want this.

Step3:- Generate co-ordinates for your map location that you want to show on maps
 a) Using Geocoder to generate our co-ordinates(lat, long)
 b)Enter address that you want your map should point to > click geocode it
generate lat and lng values

 c)Copy the latitude and longitude values 
 d)Change these values in your index.html > save > run
change lat and lng in map api of google

Step4:-Change the map type
 a)Change the MapTypeid
 mapTypeId :google.maps.MapTypeId.HYBRID
NOTE:- By default its RoadMap

Step5:- Change the zoom level of the map
a) we will use map.getZOom() method to define the zoom level.
Zoom the map and go to browser console and check the value of map.getZoom() 
Use the same value in index.html file
b)we’ll change map.getCenter() method to align the map in center.

How to disable draggle and scroll properties for map?
 Use draggable:false and scrollwheel:false

How to create pop up for the marker on map?

How to add animation effect to marker?

Leave a Reply

Your email address will not be published. Required fields are marked *