vue js google maps

Vue is a very loved and famous UI framework now a days. While working on any type of Web development sometimes we need to render map in our application. We will see how we can render google maps in Vue application. By following these steps we don't need to download any library from the npm.

Generate Google Maps Key

Once generate google maps key import google maps library in application index.html file exist in public directory.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&callback=initMap">
</script>

now in component add a div in which we will render google maps

    <div id="maps" class="google-maps"></div>

Now in the script tag define google variable to use all the functions/features provided by google maps JavaScript library like this:

declare const google: any;

Now in methods property in our component we will add method to generate google maps:

loadMap() {
      const googleInit = this.getGoogleInitData(
        'latitude',
        'longitude'
      );
      this.nMap = new google.maps.Map(
        document.getElementById('maps'),
        googleInit
      );
    },
    getGoogleInitData('latitude', 'longitude') {
      return {
        zoom: 16,
        center: new google.maps.LatLng('latitude', 'longitude'),
        styles: [
          {
            featureType: "administrative.country",
            elementType: "geometry",
            stylers: [{ visibility: "simplified" }, { hue: "#ff0000" }]
          }
        ]
      };
    }

loadMap() method render map in our div as per passed latitude/longitude. In getGoogleInitData() method we can pass configuration as per our requirements. Now the last thing we need to do use loadMap() method in component created() hook like this:

this.loadMap();