JSFiddle - React, Tailwind, and code Playground

by Milos Zivkovic

HTML

<div id="feed"></div>

JavaScript

new Vue({ 
    el: '#feed' , 
    data: { 
      data: [], 
    }, 
    mounted() { 
      this.$nextTick(function() { 
        var self = this; 
        var id = window.location.href.split('=').pop() 

        //this code 
        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('mapName'), options); 
        console.log(id) 
        $.ajax({ 
          url: "https://n2s.herokuapp.com/api/post/get/10", 
          method: "GET", 
          dataType: "JSON", 
          success: function (e) { 
            if (e.status == 1) { 
              self.data = e.data; 
              console.log(e.data);  
              //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);   
            } else { 
              console.log('Error occurred');} 
            }, error: function(){ 
              console.log('Error occurred'); 
            } 
          }); 
        }) 
      }, 
    })