JSFiddle - React, Tailwind, and code Playground

by Milos Zivkovic

HTML

<script>
function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 34.397, lng: 150.644 },
            scrollwheel: false,
            zoom: 2
        });
    } // close function here
</script>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
  
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4m72nGDe0Kh0zzGb8OM6kYcvQMfH_YSI&callback=initMap">
</script>
<div id="feed"></div>
<div id="map">Serbia</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('map'), 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'); 
            } 
          }); 
        }) 
      }, 
    })