Using Google Maps with Vue.js

Question

I'm learning Vue and I have the following problem.

I am using Google Maps API to locate myself on click. Also on startup the map should show Uluru just like on the documentation at the time I built it. And this worked. On site start the map opened and showed me Uluru. It also works outside of the new Vue object.

The problem is: When I put it into new Vue object it does not work. There is no console error, nothing that could tell me what's wrong. The map just stays blank. I'm guessing the problem is me not actually calling the function.

My Html is:

<div id="map">
</div>

The script is adopted like this. I believe the callback part is the problem but I don't know how to fix it.

<script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAL1riTbssWzSBtySctopB9I8wY_OXk0og &callback=initMap"></script>

My Vue is this:

var appAlex = new Vue({
  el: "#root",
  methods: {
    /** Google maps
     * Init map function from Google Maps docs
     */
    initMap: function() {
      var place = {
        lat: -25.363,
        lng: 131.044
        // Barrie's location
        // lat: 44.4001,
        // lng: -79.666
      };
      map = new google.maps.Map(document.getElementById("map"), {
        // I made it a global so I can use it in out events
        zoom: 4,
        center: place
      });
      var marker = new google.maps.Marker({
        position: place,
        map: map
      });
    },
    findMe: function() {
      appAlex.getInfo(appAlex.Url).then(ipInfo => {
        // ipInfo;
        let lattitude = ipInfo.loc.slice(0, 7);
        let lng = ipInfo.loc.slice(8, 15);
        let place = {
          lat: parseFloat(lattitude),
          lng: parseFloat(lng)
        };
        map.setCenter({
          lat: place.lat,
          lng: place.lng
        });
        map.setZoom(13);

        // Making the cursor move to a new location.
        let marker = new google.maps.Marker({
          position: place,
          map: map
        });
      });
    }
  }
})

There is probably a lot of bad stylistic errors, which I'll be happy to also hear about. As I said this is my 1st Vue app so I don't know it well.

So to recap:

The InitMap function is being not called when it's locked in a Vue object.

I found this post, very similar to mine, but I do not understand it at all.

My script calling is this:

<footer>
  <script src="./appAlex.js"></script>
  <script src="./appSarah.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAL1riTbssWzSBtySctopB9I8wY_OXk0og &callback=appAlex.initMap"></script>
</footer>

I tried with and without appAlex in front of initMap but no luck.

Answer 1

there are several problems in your code:

• You defined your methods, but you never call them. If you want to use a method when the instance is mounted (see reference on vue lifecycle hooks here), call it in the mounted() hook

• You don't need to declare initMap in the methods property.

• If you want to do something when user is clicking on the <div id="map">, change it to <div id="map" @click="findMe">. It is a shorthand for v-on:click, which detect when user clicks on the element.

Example of code (Not tested but should be ok):

let map = null;
function initMap() {
  const place = {
    lat: -25.363,
    lng: 131.044
    // Barrie's location
    // lat: 44.4001,
    // lng: -79.666
  };
  map = new google.maps.Map(document.getElementById("map"), {
    // I made it a global so I can use it in out events
    zoom: 4,
    center: place
  });
  const marker = new google.maps.Marker({
    position: place,
    map,
  });
}

var appAlex = new Vue({
  el: "#root",
  mounted() {
    // do something after mounting vue instance
    initMap();
  },
  methods: {
    findMe() {
      appAlex.getInfo(appAlex.Url).then((ipInfo) => {
        // ipInfo;
        const lattitude = ipInfo.loc.slice(0, 7);
        const lng = ipInfo.loc.slice(8, 15);
        const place = {
          lat: parseFloat(lattitude),
          lng: parseFloat(lng)
        };
        map.setCenter({
          lat: place.lat,
          lng: place.lng
        });
        map.setZoom(13);

        // Making the cursor move to a new location.
        const marker = new google.maps.Marker({
          position: place,
          map,
        });
      });
    }
  }
})