How to mark latitude and longitude on Google Maps using vue js by json data obtained by ajax request?

Question

This is my vue js script to get the json data using ajax request

    <script>
    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');
            }
        });
    })
  },
})    </script>



 <script>
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) => {
      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))
    });
  }
};
</script>
<style scoped>
.google-map {
  width: 800px;
  height: 600px;
  margin: 0 auto;
  background: gray;
}
</style>

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

This is my html code to display all the JSON data

<div class="m-single-article" id="feed">
<p>{{details.bussinessName}}</p> 
<p>{{details.pid}}</p>
<p v-for="inv in details.inventory">{{inv}}</p>
<p v-for="sub in details.sub_category">{{sub}}</p>
<div class="google-map" :id="mapName"></div>
</div>

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.

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 https://jsfiddle.net/kzc26bgs/1/

shuksin.ivan, that is valid javascript. @coder, are you using single file components and/or a module bundler? — Eric Guan, Nov 08 '17 at 05:13
@EricGuan I am using the same way as mentioned above? https://n2s.herokuapp.com/api/post/get/5 this url provides me with the values. I am able to display all other values expect google maps. Is there any way to load maps — coder, Nov 08 '17 at 05:16
The problem is with your `export`. If you're not using a module bundler like webpack or browserify, then your code will never work. It has nothing to do with ajax or vue or google maps. — Eric Guan, Nov 08 '17 at 05:18
is your requirement to place a marker on the google maps using the lat and lon obtained from the json data? @coder — Wanderer, Nov 08 '17 at 05:19
yes sir, I am getting.. that json value is been displayed above.. — coder, Nov 08 '17 at 05:38
https://stackoverflow.com/questions/7701077/add-marker-function-with-google-maps-api — jeevanswamy21, Nov 08 '17 at 05:43
var options = { zoom: 6, center: new google.maps.LatLng(12.92, 77.25), // Centered mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false }; // Init map var map = new google.maps.Map(document.getElementById('dvMap'), options); — jeevanswamy21, Nov 08 '17 at 06:06
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158471/discussion-between-jeevanswamy21-and-coder). — jeevanswamy21, Nov 08 '17 at 06:16

jeevanswamy21 · Accepted Answer · 2017-11-08T07:05:21.827

function initMap() {
var c = [{"status": true, "data": {"pid": 5, "bussinessName": "Xavier Tailoring shop", "services": "All kind of stitching works", "inventory": [], "workHr": "Monday :9:00AM to 20:0PM,Thuesday :9:00AM to 20:0PM,Wednesday :9:00AM to 20:0PM,Tuesday : 9:00AM to 20:0PM,Friday :9:00AM to 20:0PM,Saturday :9:00AM to 20:0PM,Sunday :9:00AM to 20:0PM", "description": "All kind of stitching works", "category": 11, "sub_category": ["Veg Hotel"], "lat": 9.52436859, "lon": 76.82810117, "contactName": "xavier", "contactEmail": "harisxavier@gmail.com", "contactOfficeAddress": "koovapally perubara road", "contactNumber": "8592808201", "contactOfficeNumber": "8592808201", "state": "Kerala", "city": "Koovappally", "place": "Kanjirapally - Erumely Road", "pincode": 686518, "referer": 24, "link": 31, "views": 0, "package": 1, "listing_pic": "default", "website": "example.com"}}];
  var myLatLng = {lat:c[0].data.lat  , lng:c[0].data.lon  };

  var map = new google.maps.Map(document.getElementById('mapName'), {
    zoom: 4,
    center: myLatLng
  });

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

<div id="mapName" style="width:267px; height: 270px" />
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AddKEY&callback=initMap">
</script>

var options = {
                    zoom: 6,
                    center: new google.maps.LatLng(12.92, 77.25), // Centered
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false
                };

              // Init map
              var map = new google.maps.Map(document.getElementById('dvMap'), options);

 $.post("${pageContext.request.contextPath}/getorderlist.htm", {
                    aa : aa,
                    output : output,

                }, function(data) {             

                }).done(function(data) {
                    //alert(data);
                    var json = JSON.parse(data);


                        //console.log( json);

                    for (var i = 0; i < json.length; i++) 
                    {   

                         var    
                  png='http://maps.google.com/mapfiles/ms/icons/blue-dot.png';

                             // Init markers
                            var marker = new google.maps.Marker({
                                position: new google.maps.LatLng(json[i].lat , json[i].lon),
                                map: map,
                                title: 'Click Me ' + i,
                                icon:png
                            });

                            // Process multiple info windows
                            (function(marker, i) {
                                // add click event
                                google.maps.event.addListener(marker, 'click', function() {
                                    infowindow = new google.maps.InfoWindow({
                                        content: json[k][i].address
                                    });
                                    infowindow.open(map, marker);
                                });
                            })(marker, i);                              

                        }                           


                }).fail(function(xhr, textStatus, errorThrown) {
                }).complete(function() {
                    $("#btn-save").prop("disabled", false);

                });

u can use u r ajax post insted of my ajax post change url and pass the data get the sucess function data to for loop it will automatically place marker — jeevanswamy21, Nov 08 '17 at 06:20
on dom load use mounted function ,on ajax call use this map function k — jeevanswamy21, Nov 08 '17 at 06:27
https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example — jeevanswamy21, Nov 08 '17 at 06:57
Sir, thanks for the help I tried your fiddle code. Now the map has been loaded fine.. but error occurred with vue js — coder, Nov 08 '17 at 07:13
you can view only after add the key=AddKEY here you can see otherwise see this example iused this one https://jsfiddle.net/api/post/library/pure/ — jeevanswamy21, Nov 08 '17 at 07:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158477/discussion-between-jeevanswamy21-and-coder). — jeevanswamy21, Nov 08 '17 at 07:34

How to mark latitude and longitude on Google Maps using vue js by json data obtained by ajax request?

1 Answers1