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.
Solution:-
Step1:-Generate maps Key to use Google API
a) Click the “GET A KEY” button
b) Create the project/or use existing project
c) Enable API and we are done with key creation
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.
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
c)Copy the latitude and longitude values
d)Change these values in your index.html > save > run
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?