Real-time Google Map Embedding Using VueJS
In this post we will show you Real-time Google Map Embedding Using VueJS, hear for Real-time Google Map Embedding Using VueJS we will give you demo and example for implement.
Everyone knows about implanting the google delineate their locales particularly on the contact page. In this instructional exercise, I will demonstrate to you generally accepted methods to make a basic constant google outline utilizing Vue js. The application will likewise give ongoing geographics arranges as well. Other than Vue js, I will likewise utilize Axios for making HTTP API ask for and Lodash for effectively including additional usefulness in javascript.
The application will acknowledge put name and it will call Google Map API progressively to get both scope and longitude of the place you scan for and furthermore insert the guide of that place. Before we begin coding we have to get our free Google Map API Key. You can get your free key by going by the accompanying connection.
see this also angular country state map location with example and demo
We are utilizing two Google Map REST API in this demo application.
1) Google Maps Embed API
The Google Maps Embed API gives you a chance to put an intelligent guide, or Street View display on your site with a basic HTTP ask. It can be effectively installed on your site page or blog by setting the Google Maps Embed API URL as the src property of an iframe:
<iframe width="650" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=ADD_YOUR_API_KEY&q=Space+Needle,Seattle+WA" allowfullscreen> </iframe>
2) Geocoding request and response (latitude/longitude lookup) API
The accompanying illustration asks for the scope and longitude of “Mountain View, CA”, and indicates that the yield must be in JSON organize.
https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=ADD_YOUR_API_KEY
You can test this by entering the URL into your web program (make sure to supplant “ADD_YOUR_API_KEY” with your real API key). The reaction incorporates the scope and longitude of the address.
Start Coding for Real-time Google Map Embedding Using VueJS
The Complete code of Real-time Google Map Embedding Using VueJS is given following.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!- - The over 3 meta labels *must* start things out in the head; some other head content must come *after* these labels - >
<title>Real-time Google Map Embedding Using VueJS - onlinecode</title>
<meta name="description" content="Real-time Google Map Embedding Using VueJS - onlinecode">
<!-- add Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<div class="container Map">
<div class="row Map">
<div class="col-md-10 Map col-md-offset-1">
<div class="lead-form Map">
<h1 class="text-center Map">Real-time Google Map Embedding Using VueJS</h1>
<hr/>
<div class="row Map">
<div class="col-md-12 Map">
<input type="text Map" class="form-control input-lg" placeholder="Enter Place Name" v-model="place">
</div>
<div class="col-md-6 Map"><h3> Latitude : {{ latitude }}</h3></div>
<div class="col-md-6 Map"><h3> Longitude : {{ longitude }}</h3></div>
<div class="col-md-12 Map" v-bind:class="{ 'not-visible' : active }" >
<!-- ADD_YOUR_API_KEY hear -->
<iframe frameborder="0" style="width: 100%; height: 350px; border:0" v-bind:src="'https://www.google.com/maps/embed/v1/place?key=ADD_YOUR_API_KEY&q='+ place" allowfullscreen></iframe>
</div>
</div>
</div><!-- .lead-form end -->
</div> <!-- .col-md-6.col-md-offset-3 end-->
</div> <!-- .row end -->
</div> <!-- .container end -->
</div> <!-- #app end -->
</body>
<!-- Real-time Google Map Embedding Using VueJS - onlinecode -->
<!-- include script -->
<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</html>
The info is two-route bound to a model named the place. The both scope and longitude models are one-way bound. The dynamic model is utilized to make the perceivability of iframe covered up when there is no an incentive in input. I utilized some bootstrap for making an extremely fundamental CSS format.
Now let’s see the codes inside the main.js file.
// app var
var app = new Vue({
el: '#app',
data: {
latitude: '',
place: '',
active : true,
longitude: ''
},
// watch
watch: {
place: function() {
this.longitude = '';
this.latitude = '';
this.active = true;
if (this.place.length >= 4) {
this.lookupCoordinates();
this.active = false;
}
}
},
// methods
methods: {
lookupCoordinates: _.debounce(function() {
var app = this;
app.longitude = "Searching.....";
app.latitude = "Searching.....";
axios.get('https://maps.googleapis.com/maps/api/geocode/json?address=' + app.place)
.then(function (response) {
app.longitude = response.data.results[0].geometry.location.lng;
app.latitude = response.data.results[0].geometry.location.lat;
})
.catch(function (error) {
app.longitude = "Invalid place";
app.latitude = "Invalid place";
})
}, 600)
}
})
The watch is utilized to guarantee that the API call just happens when there is no less than 4 character in our info field. It lessens undesirable API calls. At the point when input length achieves 4 letters then the lookupCoordinates technique is called. The _.debounce() is a lodash custom strategy which is utilized to defer the execution to 600 milliseconds with the goal that it will give the client to totally sort their place name and hence counteract undesirable API calls. The axios.get() technique call the google outline for getting geolocation data, for example, scope and longitude. The axios.then() technique gives us the reaction JSON information and we tie it to our scope and longitude models. The axios.catch() gets the mistakes.
Now finally let’s improve the look and feel of our application. The codes in the style.css(minifier css) file are given below.
#app{height:100%;width:100%;background:url(https://source.unsplash.com/category/nature/1920x1080) center center no-repeat fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}h1,h3{font-weight:700;color:#666}.not-visible{visibility:hidden}#submit-form{margin-top:20px}.lead-form{background-color:rgba(255,255,255,.6);border-radius:5px;padding:10px 50px 30px;margin-top:30px;margin-bottom:30px}span.city-span{color:(#444);text-transform:uppercase;margin-left:5px;margin-top:10px}.form-control{margin-bottom:3px}
I am using Unsplash Source API for getting free beautiful different photos every time I refresh the page. You can customize it by visiting the following link.
check demo for Real-time Google Map Embedding Using VueJS
Hope this code and post will helped you for implement Real-time Google Map Embedding Using VueJS. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org
Reference @ shareurcodes.com