Real-time Google Map Embedding Using Vue JS

Everybody is familiar with embedding the google map on their sites especially on the contact page. In this tutorial, I will show you how to create a simple real-time google map embedding using Vue js. The application will also give real time geographics coordinates too. Besides Vue js, I will also use Axiosfor making HTTP API request and Lodashfor easily adding extra functionality in javascript.

The application will accept place name and it will call Google Map API in real time to get both latitude and longitude of the place you search for and also embed the map of that place. Before we start coding we need to get our free Google Map API Key. You can grab your free key by visiting the following link.

We are using two Google Map REST API in this demo application.

1) Google Maps Embed API

The Google Maps Embed API lets you place an interactive map, or Street View panorama on your site with a simple HTTP request. It can be easily embedded on your web page or blog by setting the Google Maps Embed API URL as the src attribute of an iframe:

The input is two-way bound to a model named the place. The both latitude and longitude models are one-way bound. The active model is used to make the visibility of iframe hidden when there is no value in input. I used some bootstrap for creating a very basic CSS layout.

The watch is used to ensure that the API call only happens when there is at-least 3 character in our input field. It helps to reduce unwanted API calls. When input length reaches 3 letters then the lookupCoordinates method is called. The _.debounce() is a lodash custom method which is used to delay the execution to 500 milliseconds so that it will give the user to completely type their place name and thus prevent unwanted API calls. The axios.get() method call the google map API for getting geolocation information such as latitude and longitude. The axios.then() method gives us the response JSON data and we bind it to our latitude and longitude models. The axios.catch() catches the errors.

Now finally let's improve the look and feel of our application. The codes in the style.css file are given below.