title: Error while using Google API in Vue mounted hook
body: <p>Need assistance on this. I have the Google map api loaded on the created hook of the parent component. But I keep on getting this error Error in the created hook: <code>ReferenceError: google is not defined</code></p>
  
  <p>Below is how the Google map script was called.</p>
  
  <pre><code>mounted() {
      let mapScript = document.createElement('script');
      mapScript.setAttribute('src', 'https://maps.googleapis.com/maps/api/js?key=TheKey');
      document.head.appendChild(mapScript);
  }
  </code></pre>
  
  <p>And this is the child component where I want the Google map to be displayed.</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
      &lt;div ref="mapID" :id="mapID"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      props: [ 'place', 'coordinates' ],
      data() {
          return {
              mapID: 'mapID',
              markerCord: '',
              markers: []
          }
      },
      methods: {
          initialize() {
              console.log('Hello World');
              let locations = [
                  ['Bondi Beach', -33.890542, 151.274856, 4],
                  ['Coogee Beach', -33.923036, 151.259052, 5],
                  ['Cronulla Beach', -34.028249, 151.157507, 3],
                  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
                  ['Maroubra Beach', -33.950198, 151.259302, 1]
              ];
  
              let map = new 
              google.maps.Map(document.getElementById(this.mapID), {
                  zoom: 10,
                  center: new google.maps.LatLng(-33.92, 151.25),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              });
  
              let infowindow = new google.maps.InfoWindow();
  
              let marker, i;
  
              for (i = 0; i &lt; locations.length; i++) {
                  marker = new google.maps.Marker({
                      position: new google.maps.LatLng(locations[i][1], 
                      locations[i][2]),
                      map: map
                  });
  
                  google.maps.event.addListener(marker, 'click', 
                  (function(marker, i) {
                      return function() {
                          infowindow.setContent(locations[i][0]);
                          infowindow.open(map, marker);
                      }
                  })(marker, i));
              }
          }
      },
      mounted() {
          this.initialize()
      }
  }
  &lt;/script&gt;
  </code></pre>