Display Google Map using Vue.js, inside a rails application

Question

Good day,

I have a simple rails app and I need to load a Google Map using Vue.js. Am able to display the Map outside of the vue div. However the map inside the view div is blank. In other words 'map_canvas1' works and 'map_canvas2' doesnt.

The link below is what i am trying to achieve.

https://jsfiddle.net/zcahougd/

html

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

script

<script type="text/javascript">  

var mapOptions = {
  zoom: 8,
  center: new google.maps.LatLng(25.761680, -80.19179),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

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);
}
});
</script>

<style>
#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>

I load the scripts in

application.html.erb

<!DOCTYPE html>
<html>
   <head>
    <title>GmapsRails</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://maps.googleapis.com/maps/api/jskey=AIzaSyDqamX08qYRLiZameV1cMgBRbzSDLgVWuY"> 
    </script>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

Lyle Phillips · Accepted Answer · 2019-12-23 08:40:56Z

0

Found an answer to my question online. It appears that the "ready" function is depricated and i needed to use "mounted".

new Vue({
  el: '#vue-map',
  data: {},
  methods: {},
  mounted(){
      var myOptions = {
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(25.761680, -80.19179)
      };
      var mapp = new google.maps.Map(document.getElementById("map_canvas2"), 
                 myOptions);
  }
});

answered Dec 23, 2019 at 8:40

Lyle Phillips

3973 gold badges7 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display Google Map using Vue.js, inside a rails application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related