title: Use Reverse Geocoding in Vue.js
body: <p>I'm working on a project which track GPS locations and should display in Google map as points. Therefore I use <a href="https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/geocoding-reverse" rel="nofollow noreferrer">Reverse Geocoding</a>.</p>
  
  <p>I just put <strong>below code</strong> inside <code>methods:</code> in my <code>Component</code>.</p>
  
  <pre><code>        initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 8,
              center: {lat: 40.731, lng: -73.997}
            });
            var geocoder = new google.maps.Geocoder;
            var infowindow = new google.maps.InfoWindow;
  
            document.getElementById('submit').addEventListener('click', function() {
              this.geocodeLatLng(geocoder, map, infowindow);
            });
          },
          geocodeLatLng(geocoder, map, infowindow) {
            var input = document.getElementById('latlng').value;
            var latlngStr = input.split(',', 2);
            var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
            geocoder.geocode({'location': latlng}, function(results, status) {
              if (status === 'OK') {
                if (results[0]) {
                  map.setZoom(11);
                  var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                  });
                  infowindow.setContent(results[0].formatted_address);
                  infowindow.open(map, marker);
                } else {
                  alert('No results found');
                }
              } else {
                alert('Geocoder failed due to: ' + status);
              }
            });
          }
  </code></pre>
  
  <p>Also I put <strong>below code</strong> in <code>app.blade.php</code></p>
  
  <pre><code>    &lt;script async defer
          src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&amp;callback=initMap"&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>My problem is when I use <code>callback</code> in parameter the <code>initMap</code> function is not identified. Therefore map is not loading on my view. How should I use it? and also should I need to use <code>axios.get(my_url_here)</code> to do this? I'm stuck in this case. If anyone can consider and help me for this matter would be grateful. </p>