JSFiddle - React, Tailwind, and code Playground

by vijayram_a

HTML

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




<!-- foobar({"ip":"12.37.153.190","country_code":"US","country_name":"United States","region_code":"VA","region_name":"Virginia","city":"Herndon","zipcode":"","latitude":38.9695,"longitude":-77.3861,"metro_code":"511","areacode":"703"}); -->

JavaScript

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

        $.ajax({
            url: 'http://freegeoip.net/json/',
            dataType: 'jsonp'
        }).done(function (jsonp) {
            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;
            
            var initialLocation = new google.maps.LatLng(lat, lng);
            map.setCenter(initialLocation);
            infowindow.setContent(lat + " " + lng);
            infowindow.setPosition(initialLocation);
            infowindow.open(map);
        });

    });
});