Google Maps and Vue.js

by alexchetv

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<div id="map_canvas1"></div>

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

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

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;
}

JavaScript

var mapOptions = {
  zoom: 8,
  center: new google.maps.LatLng(25.761680, -80.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: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(25.761680, -80.19179)
    };
    var map = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
  }
});