title: Using Google Maps with Vue.js
body: <p>I'm learning Vue and I have the following problem. </p>
  
  <p>I am using Google Maps API to locate myself <code>on click</code>. 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 <code>new Vue</code> object.</p>
  
  <p>The problem is: When I put it into <code>new Vue</code> 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.</p>
  
  <p>My Html is:</p>
  
  <pre><code>&lt;div id="map"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The script is adopted like this. I believe the callback part is the problem but I don't know how to fix it.</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAL1riTbssWzSBtySctopB9I8wY_OXk0og &amp;callback=initMap"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>My Vue is this:</p>
  
  <pre><code>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 =&gt; {
          // 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
          });
        });
      }
    }
  })
  </code></pre>
  
  <p>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.</p>
  
  <p>So to recap:</p>
  
  <p>The <code>InitMap</code> function is being not called when it's locked in a Vue object.</p>
  
  <p>I found <a href="https://stackoverflow.com/questions/46171456/getting-google-maps-to-work-with-vue-js">this post</a>, very similar to mine, but I do not understand it at all.</p>
  
  <p>My script calling is this:</p>
  
  <pre><code>&lt;footer&gt;
    &lt;script src="./appAlex.js"&gt;&lt;/script&gt;
    &lt;script src="./appSarah.js"&gt;&lt;/script&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAL1riTbssWzSBtySctopB9I8wY_OXk0og &amp;callback=appAlex.initMap"&gt;&lt;/script&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>I tried with and without appAlex in front of initMap but no luck.</p>