var map; function initMap(center) { map = $("#map").geomap({ center: center || [-71.0597732, 42.3584308], zoom: 14 }); map.geomap("shapeStyle", { strokeOpacity: .1, fillOpacity: .4, width: "16px", height: "16px", borderRadius: "8px", color: "#44e" }); } if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (p) { initMap([p.coords.longitude, p.coords.latitude]); }, function (error) { initMap(); }); } else { initMap(); } $("#loc").submit(function() { $.ajax({ url: "http://open.mapquestapi.com/nominatim/v1/search", data: { format: "json", q: $("#loc input").val() }, dataType: "jsonp", jsonp: "json_callback", success: function(results) { if (results.length > 0) { var nbbox = results[0].boundingbox; map.geomap("option", "bbox", [ nbbox[2], /* min longitude*/ nbbox[0], /* min latitude */ nbbox[3], /* max longitude */ nbbox[1] /* max latitude */ ]); } } }); return false; }); $("#twit").submit(function() { map.geomap("empty"); search(); return false; }); function search() { var center = map.geomap("option", "center"), geocode = [ center[1], center[0], Math.min(2500, map.geomap("getPixelSize") * $(document).width()/2 / 1000 ) + "km" ]; $.ajax({ url: "http://search.twitter.com/search.json", data: { rpp: 100, q: $("#twit input").val(), geocode: geocode.join(",") }, dataType: "jsonp", success: function(tweets) { map.geomap("empty"); $.each(tweets.results, function() { if (this.geo) { this.geo.coordinates = [ this.geo.coordinates[1], this.geo.coordinates[0] ]; map.geomap("append", this.geo); } }); } }); }
<div id="map"></div> <div id="content"> <form id="loc"> <label>Zoom to <input type="text" autofocus /> </label> <button type="submit">Go</button> </form> <form id="twit"> <label>Search Twitter for <input type="text" /> </label> <button type="submit">Go</button> </form> </div>