JSFiddle - React, Tailwind, and code Playground

by ramyaaviji

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<div id="json"></div>
<button id="json-load">Load JSON</button>
<div id="content" style="height: 450px"></div>

JavaScript

$('#json-load').click(function () {

     $.ajax({
         url: 'http://freegeoip.net/json/',
         dataType: 'jsonp',
         type: 'POST',
         
     }).done(function (jsonp) {

         $('#json').append(' ' + jsonp.latitude + ' ' + jsonp.longitude + ' ' + jsonp.ip);
         var infowindow = new google.maps.InfoWindow();
var mapOptions = {
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
         var map = new google.maps.Map(document.getElementById("content"), mapOptions);
    
    var lat = jsonp.latitude;
    var lng = jsonp.longitude;
    
    initialLocation = new google.maps.LatLng(lat, lng);
    map.setCenter(initialLocation);
    infowindow.setContent(lat + " " + lng);
    infowindow.setPosition(initialLocation);
    infowindow.open(map);

     });

 });