Created
March 26, 2012 23:44
-
-
Save jfensign/2210732 to your computer and use it in GitHub Desktop.
NodeJS and Google's Geocoder API
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Directory Structure | |
/app | |
/scripts | |
|-handleFormSubmit.js | |
/node_modules | |
/views | |
|-index.jade | |
/controllers | |
|-maps_controller.js | |
|-index.js |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//handleFormSubmit.js | |
$(document).ready(function() { | |
var map = ""; | |
var markers = []; | |
//handle form submission | |
$("form").submit(function() { | |
//make request to google maps API... | |
//Choice of $.ajax over $.post is due to preference | |
$.ajax({ | |
type: 'post', | |
url: $(this).attr('action'), | |
data: "location=" + $("#locate").val(), | |
complete: function(data) { | |
//parse JSON | |
responseJSON = $.parseJSON(data.responseText); | |
//set maps's center | |
var center = ''; | |
//try getting client's location | |
if (google.loader.ClientLocation){ | |
center = new google.maps.LatLng( | |
google.loader.ClientLocation.latitude, | |
google.loader.ClientLocation.longitude | |
); | |
//if client's location is unavailable, | |
//set the queried location as the map's center point | |
} else { | |
center = new google.maps.LatLng($("#locate").val()); | |
} | |
var opts = { | |
zoom: 5, | |
center: center, | |
mapTypeId: google.maps.MapTypeId.ROADMAP | |
} | |
//create map | |
var map = new google.maps.Map(document.getElementById("map_div"), opts); | |
//geocoder instance | |
geocoder = new google.maps.Geocoder(); | |
//create marker's and bind event listener's | |
$.each(responseJSON.Placemark, function(key, val) { | |
geocoder.geocode( { 'address': val.address}, function(results, status) { | |
var marker = new google.maps.Marker({ | |
map: map, | |
position: results[0].geometry.location, | |
title: val.address | |
}); | |
markers.push(marker); | |
google.maps.event.addListener(marker, 'click', function() { | |
var infoWindow = new google.maps.InfoWindow({ | |
content: val.address, | |
size: new google.maps.Size(50, 50), | |
position: marker.position | |
}); | |
infoWindow.open(map); | |
}); | |
}); | |
}); | |
} | |
}); | |
}); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//index.jade | |
!!! 5 | |
html(lang="en") | |
head | |
title #{title} | |
script(type="text/javascript", src="jquery.min.js") | |
script(type="text/javascript", src="https://www.google.com/jsapi") | |
script(type="text/javascript") | |
google.load("maps", "3.8", {"other_params" : "sensor=false"}); | |
script(type="text/javascript", src="/assets/handleSearch.js") | |
body | |
h1 #{title} | |
form(name="find", action="/search", method="post", onsubmit="return false;") | |
| Search | |
input(type="text", name="location", id="locate") | |
input(type="submit", value="Search") | |
div(id="map_div", style="width: 900px; height: 100%; float: right;") |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//index.js | |
//create server | |
var express = require('express'), | |
app = module.exports = express.createServer() | |
//configure app | |
app.configure(function() { | |
app.set('views', __dirname + '/views'); | |
app.set('view_options', {layout : false}); | |
app.use(express.bodyParser()); | |
app.use(express.methodOverride()); | |
app.use(app.router); | |
app.use("/assets", express.static(__dirname + '/assets')); | |
app.use('/models', __dirname + '/models'); | |
}); | |
//include the maps controller | |
var maps = require('./controllers/maps_controller.js'); | |
//app.<REQUEST_METHOD>(<REQUEST_URI>, <CONTROLLER_METHOD>) | |
app.get('/', maps.start); | |
app.post('/search', maps.slugSearch); | |
app.listen(3385); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//maps controller | |
//require dependencies | |
var qStr = require('querystring'), | |
http = require('http'); | |
//renders the form/index page | |
exports.start = function(req, res) { | |
res.render('index.jade', | |
{layout : false, | |
title : "Test", | |
scripts : {source : __dirname + "/assets/handleSearch.js"}}); | |
} | |
//queries API and returns JSON encoded response to be parsed by jQuery | |
exports.slugSearch = function(req, res) { | |
var reqBody = ""; | |
var reqJSON = ""; | |
var apiKey = "API KEY", | |
client = "CLIENT ID", | |
place = req.body.location, | |
options = { | |
host: 'maps.google.com', | |
port: 80, | |
path: '/maps/geo?'+ | |
qStr.stringify({"q":place}) + | |
'&output=json&oe=utf8/&sensor=false&key=' | |
+apiKey | |
}; | |
http.get(options, function(mapsResponse) { | |
mapsResponse.setEncoding("utf8"); | |
mapsResponse.on("data", function(chunk) { | |
reqBody += chunk; | |
}); | |
mapsResponse.on("end", function() { | |
res.send(reqBody); | |
}); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment