title: How to mark latitude and longitude on Google Maps using vue js by json data obtained by ajax request?
body: <p>This is my vue js script to get the json data using ajax request</p>
  
  <pre><code>    &lt;script&gt;
      new Vue({
    el: '#feed' ,
    data: {
      details: [],
    },
    mounted() {
      this.$nextTick(function() {
        var self = this;
        var id = window.location.href.split('=').pop()
               console.log(id)
        $.ajax({
              url: "https://",
              method: "GET",
              dataType: "JSON",
              success: function (e) {
                  if (e.status == 1) {
                      self.details = e.data;
                      console.log(e.data)
                  }
                  else
                  {
                      console.log('Error occurred');}
              }, error: function(){
              console.log('Error occurred');
              }
          });
      })
    },
  })    &lt;/script&gt;
  
  
  
   &lt;script&gt;
  export default {
    name: 'google-map',
    props: ['name'],
    data: function () {
      return {
        mapName: this.name + "-map",
        markerCoordinates: [{
          latitude: 51.501527,
          longitude: -0.1921837
        }],
        map: null,
        bounds: null,
        markers: []
      }
    },
    mounted: function () {
      this.bounds = new google.maps.LatLngBounds();
      const element = document.getElementById(this.mapName)
      const mapCentre = this.markerCoordinates[0]
      const options = {
        center: new google.maps.LatLng(mapCentre.latitude, mapCentre.longitude)
      }
      this.map = new google.maps.Map(element, options);
      this.markerCoordinates.forEach((coord) =&gt; {
        const position = new google.maps.LatLng(coord.latitude, coord.longitude);
        const marker = new google.maps.Marker({ 
          position,
          map: this.map
        });
      this.markers.push(marker)
        this.map.fitBounds(this.bounds.extend(position))
      });
    }
  };
  &lt;/script&gt;
  &lt;style scoped&gt;
  .google-map {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    background: gray;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>I am get errors as Uncaught SyntaxError: Unexpected token export..
  I am not getting any idea how to solve the same issue. Please help me to solve</p>
  
  <p>This is my html code to display all the JSON data</p>
  
  <pre><code>&lt;div class="m-single-article" id="feed"&gt;
  &lt;p&gt;{{details.bussinessName}}&lt;/p&gt; 
  &lt;p&gt;{{details.pid}}&lt;/p&gt;
  &lt;p v-for="inv in details.inventory"&gt;{{inv}}&lt;/p&gt;
  &lt;p v-for="sub in details.sub_category"&gt;{{sub}}&lt;/p&gt;
  &lt;div class="google-map" :id="mapName"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I am getting errors. Can anyone please help me to solve my issue. How can I able to get the lat and long to be displayed on the google maps. I am a beginner in vue js. Please help me to solve this issue.</p>
  
  <p>Is there any another method to solve the same using google maps api? Please help me to have a solution
  My js fiddle link without adding google maps is <a href="https://jsfiddle.net/kzc26bgs/1/" rel="nofollow noreferrer">https://jsfiddle.net/kzc26bgs/1/</a></p>