Google with jsonp

by anandhinava

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<button id="jsonp-load">Load JSONP</button>
<div id="map"></div>

CSS

#map{
    height: 500px;
}

JavaScript

var map = new google.maps.Map(document.getElementById("map"), {zoom: 16,
    center: new google.maps.LatLng(38.957807, -77.451135),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

        $.ajax({
            url: 'http://freegeoip.net/json/', dataType: 'jsonp'
        }).done(function (jsonp) {
            var latLng = new google.maps.LatLng(jsonp.latitude, jsonp.longitude);
                   new google.maps.Marker({position: latLng,map: map});
                   map.panTo(latLng);

        });
    });
});