Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

maps

Related course:
Fullstack Vue: The Complete Guide to Vue.js

Google Maps can be used with Vue.js. In this little demo we show you how to do that.
We’ll show both the traditional and the Vue way.

Vue.js with Maps

We include Google Maps, then display it using Vue.js. The output will look like this:

Google Maps with Vue.js

There are two divs that we display the maps on (canvas1 and canvas2) that are styled using css. Coordinates are defined using latitude and longitude.


<html>
<head>
<style type="text/css">.gm-style .gm-style-mtc label,.gm-style .gm-style-mtc div{font-weight:400}style>
<style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}
style>
<style type="text/css">@media print { .gm-style .gmnoprint, .gmnoprint { display:none }}@media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}style>
<style type="text/css">.gm-style-pbc{transition:opacity ease-in-out;background-color:rgba(0,0,0,0.45);text-align:center}.gm-style-pbt{font-size:22px;color:white;font-family:Roboto,Arial,sans-serif;position:relative;margin:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="google-maps_files/dummy.js">script>
<link rel="stylesheet" type="text/css" href="google-maps_files/result-light.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js">script>

<style type="text/css">
#map_canvas1{
width: 50%;
height: 300px;
border: 1px solid black;
float:left;
}
#map_canvas2{
width: 45%;
height: 300px;
border: 1px solid black;
float:right;
}
style>

<title>Google Maps and Vue.jstitle>

<script type="text/javascript">//
window.onload=function(){
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(20.1, -70.19179),
mapTypeId: google.maps.MapTypeId.ROADMAP
}

// Let's draw the map
var map = new google.maps.Map(document.getElementById("map_canvas1"), mapOptions);

var demo = new Vue({
el: '#vue-map',
data: {

},
ready: function() {
var myOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(20.1, -70.19179)
};
var map = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
}
});

}//]]>

script>

head>

<body>
<div id="map_canvas1"> div>

<div id="vue-map">
<div id="map_canvas2"> div>
div>

<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "o3ahd45z"
}], "*")
}
script>
body>
html>


© vuejsexamples.net - Privacy Policy - Cookie Policy