Mapping places of interest near me via Geonames.org

The following is some testing I have been doing recently. I wanted to return places of interest (via the Geonames REST API and feature codes) on a Google Map. I also wanted to include Geolocation features.

by junto

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div class="input">
    <span>Geonames Username</span>
    <input id="username" type="text" value="demo" title="register for your own account" />
    <a href="http://www.geonames.org/login">Register</a>
</div>
<div class="input">
    <span>Location</span>
    <input id="lat" type="text" value="37.67859" />
    <input id="lng" type="text" value="-122.45018" />
    <button id="getLocation">Get Location</button> (defaulted to San Francisco, CA)
</div>
<div class="input">
    <span>Radius (km)</span>
    <input id="radius" type="text" value="50" />
</div>
<div class="input">
    <span>Feature Code</span>
    <input id="featureCode" type="text" value="CMTY" />
    <a href="http://www.geonames.org/export/codes.html">Reference</a>
</div>
<div class="input">
    <button id="getData">Get Data</button>
</div>
<div id="output"></div>
<div id="map_canvas" style="height:400px;"></div>

CSS

.input { padding-bottom: 5px; }
#output ul { 
    padding-top: 5px; 
    border-top: solid 1px black; 
    line-height: 2em;
    list-style-type: disc;
    padding-left: 25px;
}

JavaScript

var geocoder;
var map;
var markersArray = [];

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng($("#lat").val(), $("#lng").val());
    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

$("#getData").bind("click", function() {

    // clear previous
    deleteOverlays();
    
    // inputs
    var username = $("#username").val();
    var featureCode = $("#featureCode").val();
    var radius = $("#radius").val();
    var lat = $("#lat").val();
    var lng = $("#lng").val();

    // url to json REST API
    var url = "http://api.geonames.org/findNearbyJSON?lat=" + lat + "&lng=" + lng + "&featureCode=" + featureCode + "&radius=" + radius + "&username=" + username;

    // get and process
    $.getJSON(url, function(data) {
        var list = $("<ul />");
        if (data.geonames) {
            $.each(data.geonames, function(index, item) {
                $("<li />", {
                    "text": item.toponymName
                }).appendTo(list);
                var infowindow = new google.maps.InfoWindow({
                    content: "Name: " + item.toponymName + "<br/>Geo: " + item.lat + " ," + item.lng + "."
                });
                var pos = new google.maps.LatLng(item.lat, item.lng);
                addMarker(pos, item.toponymName, infowindow);
            });
            showOverlays();
        }
        else {
            $("<li />", {
                "error": "no result"
            }).appendTo(list);
        }
        $("#output").fadeOut("fast", function() {
            $(this).empty().append(list).fadeIn("slow");
        });
    });
});

$("#getLocation").bind("click", function() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(handleLocation, handleNoLocation, {
            timeout: 10000
        });
   ...