title: How to use Google's geocoding service api in vuejs?
body: <p>I am trying to render the geocoding service google api mentioned <a href="https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple" rel="nofollow noreferrer">here</a> using VueJS. I am able to do the same thing using normal Javascript and HTML but not able to do same using VueJS. I am not sure how to render it using VueJS. </p>
  
  <p>Here is my index.html code:</p>
  
  <pre><code>&lt;!-- index.html --&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;VueJS NodeJS and Express example&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;script src="bundle.js"&gt;&lt;/script&gt;
      &lt;script async defer
      &lt;script src="https://maps.googleapis.com/maps/api/js?key=APIkey&amp;callback=initMap"&gt;&lt;/script&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my MapItem.vue file:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h1&gt;Mapping api&lt;/h1&gt;
      &lt;div id="floating-panel"&gt;
        &lt;input id="address" type="textbox" value="Sydney, NSW"&gt;
        &lt;input id="submit" type="button" value="Geocode"&gt;
      &lt;/div&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data(){
          return{
            item:{}
          }
      },
      methods: {
  
      initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 8,
            center: {lat: -34.397, lng: 150.644}
          });
          var geocoder = new google.maps.Geocoder();
  
          document.getElementById('submit').addEventListener('click', function() {
            geocodeAddress(geocoder, map);
          });
        },
        geocodeAddress(geocoder, resultsMap) {
          var address = document.getElementById('address').value;
          geocoder.geocode({'address': address}, function(results, status) {
            if (status === 'OK') {
              resultsMap.setCenter(results[0].geometry.location);
              var marker = new google.maps.Marker({
                map: resultsMap,
                position: results[0].geometry.location
              });
            } else {
              alert('Geocode was not successful for the following reason: ' + status);
            }
          });
        }
  }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
          height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        #floating-panel {
          position: absolute;
          top: 10px;
          left: 25%;
          z-index: 5;
          background-color: #fff;
          padding: 5px;
          border: 1px solid #999;
          text-align: center;
          font-family: 'Roboto','sans-serif';
          line-height: 30px;
          padding-left: 10px;
        }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>Nothing is rendered on my local server when I run it. Any idea?</p>