How can I able to display latitude and longitude obtained by json data on google map by using modal for each of the search results in vue js?

Question

I have the following search results coming as the json data. For each search result there is lat and lon. So, for each search result when I click on view map, a modal will pop up and shows the marker on the google map.. but using the following code i am not getting the same..

My json data is

{"status": true, "data": [{"pid": 1, "businessName": "ld", "lat": 9.5273308, "lon": 76.8228674, "contactName": "bin"}, {"pid": 2, "businessName": "lod", "lat": 9.523308, "lon": 76.8228674, "contactName": "son"},{"pid": 3, "businessName": "rd", "lat": 9.5273308, "lon": 76.822867, "contactName": "in"}]}

My vue js code is

 <script>
    searchContent = new Vue({
            el: "#searchContent",
            data: {
              vector: {}
            }
          });
    categories = new Vue({
        el: '#categories',
        data: {
            articles: [],
            services: [],
            category: 0,
            subcategory: 0,
            content: false
        },
         mounted() {
        var vm = this;

        $.ajax({
            url: "/get_all_category/",
            method: "GET",
            dataType: "JSON",
            success: function(e) {
                    console.log(e); 
                
                 vm.articles = e;
                console.log(vm);

            },
        });
    },
              methods: {
              prefetch: function() {
                var filter = {};
                filter['category'] = this.category;
                if (this.content !== false)
                  this.content.abort()
                this.content = $.ajax({
                  'url': 'https:/filter/',
                  data: filter,
                  dataType: "JSON",
                  type: "POST",
                  success: function(e) {
                     window.searchContent.vector = e.data;
                    console.log(e);
 
                    var options = { 
     zoom: 8, 
     center: new google.maps.LatLng(e.data.lat , e.data.lon), // Centered 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: false 
     }; 
    
     // Init map 
     var map = new google.maps.Map(document.getElementById('mapName'), options); 
     //use code 
    var i=0;
    
    
     // Init markers 
     var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(e.data.lat , e.data.lon), 
     map: map, 
     title: 'Click Me ' + i, 
     }); 
    
     // Process multiple info windows 
     (function(marker, i) { 
     // add click event 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow = new google.maps.InfoWindow({ 
     content: e.data.lat 
     }); 
     infowindow.open(map, marker); 
     }); 
     })(marker, i); 
                  }
                })
              }
            }
    
    })
    </script>

My html code to display the same is

 <div id="searchContent" >
    <div v-for="row in vector" >
    <h6>{{row.businessName}}</h6>
<div>
<a data-toggle="modal" data-target="#myModal1">View Map</a></div>
    </div>
    </div>




<div id="myModal1" class="modal fade" role="dialog">
  <div class="modal-dialog">
      <!-- Modal content-->
      <div id="mapName" style="width:667px; height: 370px" />
    <!-- Replace the value of the key parameter with your own API key. -->
    </div>
      </div>
    </div>

So, when I click on the view map I need to display the marker corresponding to the search result. can anyone please help me to solve the problem?

Answer 1

Warning: this isn't a solution - following code only demostrates how easy is to use the ready-made web components. I just think, that this information has it's value and is related to this issue, because it can greatly simplify your code / solution / life :)

---

Look at this example. It's using extraneous, ready-made Polymer based custom web component from webcomponents.org. As you can see, these components fully interoperates with Vue. You can not only use them, you also have full control about their properties. And best of all, you can listen to their custom events, just like in other Vue components...

So, this is maybe the easiest way to achieve what you need. Just wrap my-map with modal and set the properties to the correct values... And of course, take a look to provided link for documentation for this google-map component.

Vue.component('my-map', {
  template: '#my-map',
  props: ['lat', 'long'],
  data () {
    return {
      latitude: '',
      longitude: ''
    }
  },
  methods: {
    setCoords (e) {
      if (e.type === 'latitude-changed')
        this.latitude = e.detail.value
      if (e.type === 'longitude-changed')
        this.longitude = e.detail.value
    }
  }
})

new Vue({
  el: '#app'
})

google-map {
  height: 186px;
}

<base href="https://raw-dot-custom-elements.appspot.com/GoogleWebComponents/google-map/v2.0.2/google-map/">
<link rel="import" href="google-map.html">

<div id="app">
  <my-map lat="37.78" long="-122.4"></my-map>
</div>

<template id="my-map">
  <div>
    Marker coords: lat {{ latitude }} / long {{ longitude }}
    <google-map fit-to-marker api-key="AIzaSyD3E1D9b-Z7ekrT3tbhl_dy8DCXuIuDDRc">
      <google-map-marker
        :latitude="lat"
        :longitude="long"
        draggable="true"
        slot="markers"
        title="Your location"
        @latitude-changed="setCoords"
        @longitude-changed="setCoords"
      >
      </google-map-marker>
    </google-map>
  </div>
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

Honestly ... I think this combination of Vue, and Polymer based custom web components is pretty awesome. Now one can achieve unbelievable results with beautiful, declarative syntax. Did you noticed, that in this example is no additional javascript? Yes, modern browsers works with these custom components with no additional overhead. And for older browsers there is a polyfill...