Skip to content

Instantly share code, notes, and snippets.

@jfensign
Created March 26, 2012 23:44
Show Gist options
  • Select an option

  • Save jfensign/2210732 to your computer and use it in GitHub Desktop.

Select an option

Save jfensign/2210732 to your computer and use it in GitHub Desktop.

Revisions

  1. jfensign revised this gist Apr 9, 2012. 3 changed files with 15 additions and 10 deletions.
    7 changes: 4 additions & 3 deletions handleSearch.js
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@ $(document).ready(function() {
    //handle form submission
    $("form").submit(function() {
    //make request to google maps API...
    //Choice of $.ajax over $.post is simply out of preference
    //Choice of $.ajax over $.post is due to preference
    $.ajax({
    type: 'post',
    url: $(this).attr('action'),
    @@ -23,7 +23,8 @@ $(document).ready(function() {
    google.loader.ClientLocation.latitude,
    google.loader.ClientLocation.longitude
    );
    //if client's location is unavailable, set the queried location as the map's center point
    //if client's location is unavailable,
    //set the queried location as the map's center point
    } else {
    center = new google.maps.LatLng($("#locate").val());
    }
    @@ -49,7 +50,7 @@ $(document).ready(function() {
    markers.push(marker);
    google.maps.event.addListener(marker, 'click', function() {
    var infoWindow = new google.maps.InfoWindow({
    content: "<img src='http://maps.googleapis.com/maps/api/streetview?size=200x190&location=" + parseFloat(val.Point.coordinates[0]) + "," + parseFloat(val.Point.coordinates[1]) + "&heading=250&fov=90&pitch=-10&sensor=false' />",
    content: val.address,
    size: new google.maps.Size(50, 50),
    position: marker.position
    });
    6 changes: 3 additions & 3 deletions index.jade
    Original file line number Diff line number Diff line change
    @@ -4,17 +4,17 @@
    html(lang="en")
    head
    title #{title}
    script(type="text/javascript", src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")
    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;")
    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="postition: absolute; width: 900px; height: 650px; float: right;")
    div(id="map_div", style="width: 900px; height: 100%; float: right;")
    12 changes: 8 additions & 4 deletions maps_controller.js
    Original file line number Diff line number Diff line change
    @@ -5,9 +5,10 @@ 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"}});
    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) {
    @@ -20,7 +21,10 @@ exports.slugSearch = function(req, res) {
    options = {
    host: 'maps.google.com',
    port: 80,
    path: '/maps/geo?'+ qStr.stringify({"q":place}) +'&output=json&oe=utf8/&sensor=false&key='+apiKey
    path: '/maps/geo?'+
    qStr.stringify({"q":place}) +
    '&output=json&oe=utf8/&sensor=false&key='
    +apiKey
    };

    http.get(options, function(mapsResponse) {
  2. jfensign revised this gist Apr 7, 2012. 4 changed files with 41 additions and 19 deletions.
    40 changes: 26 additions & 14 deletions handleSearch.js
    Original file line number Diff line number Diff line change
    @@ -1,44 +1,56 @@
    //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 simply out of preference
    $.ajax({
    type: 'post',
    url: $(this).attr('action'),
    data: "location=" + $("#locate").val(),
    complete: function(data) {
    //parse JSON
    responseJSON = $.parseJSON(data.responseText);
    var centerPoint = new google.maps.LatLng($("#locate").val());
    //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: centerPoint,
    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) {
    if (google.loader.ClientLocation){
    var center = new google.maps.LatLng(
    google.loader.ClientLocation.latitude,
    google.loader.ClientLocation.longitude
    );
    map.setCenter(center);
    }
    //map.setCenter(results[0].geometry.location);

    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: "<img src='http://maps.googleapis.com/maps/api/streetview?size=200x190&location=" + parseFloat(val.Point.coordinates[0]) + "," + parseFloat(val.Point.coordinates[1]) + "&heading=250&fov=90&pitch=-10&sensor=false' />",
    size: new google.maps.Size(100,100),
    size: new google.maps.Size(50, 50),
    position: marker.position
    });
    infoWindow.open(map);
    2 changes: 2 additions & 0 deletions index.jade
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    //index.jade
    !!! 5
    html(lang="en")
    head
    7 changes: 6 additions & 1 deletion index.js
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,9 @@
    //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});
    @@ -11,7 +14,9 @@ app.configure(function() {
    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);

    11 changes: 7 additions & 4 deletions maps_controller.js
    Original file line number Diff line number Diff line change
    @@ -1,18 +1,21 @@
    //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 = "AIzaSyAfK9U3flxvP0xKDPl5I99g2tqigOIKaT8",
    client = "166148492718.apps.googleusercontent.com",
    var apiKey = "API KEY",
    client = "CLIENT ID",
    place = req.body.location,
    options = {
    host: 'maps.google.com',
  3. jfensign revised this gist Apr 7, 2012. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions A_dirStructure.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    //Directory Structure

    /app
    /scripts
    |-handleFormSubmit.js
    /node_modules
    /views
    |-index.jade
    /controllers
    |-maps_controller.js
    |-index.js
  4. jfensign revised this gist Apr 6, 2012. 5 changed files with 123 additions and 1 deletion.
    51 changes: 51 additions & 0 deletions handleSearch.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    $(document).ready(function() {
    var map = "";
    var markers = [];

    $("form").submit(function() {
    $.ajax({
    type: 'post',
    url: $(this).attr('action'),
    data: "location=" + $("#locate").val(),
    complete: function(data) {
    responseJSON = $.parseJSON(data.responseText);
    var centerPoint = new google.maps.LatLng($("#locate").val());
    var opts = {
    zoom: 5,
    center: centerPoint,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_div"), opts);
    geocoder = new google.maps.Geocoder();

    $.each(responseJSON.Placemark, function(key, val) {
    geocoder.geocode( { 'address': val.address}, function(results, status) {
    if (google.loader.ClientLocation){
    var center = new google.maps.LatLng(
    google.loader.ClientLocation.latitude,
    google.loader.ClientLocation.longitude
    );
    map.setCenter(center);
    }
    //map.setCenter(results[0].geometry.location);
    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: "<img src='http://maps.googleapis.com/maps/api/streetview?size=200x190&location=" + parseFloat(val.Point.coordinates[0]) + "," + parseFloat(val.Point.coordinates[1]) + "&heading=250&fov=90&pitch=-10&sensor=false' />",
    size: new google.maps.Size(100,100),
    position: marker.position
    });
    infoWindow.open(map);
    });
    });
    });
    }
    });
    });
    });
    18 changes: 18 additions & 0 deletions index.jade
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    !!! 5
    html(lang="en")
    head
    title #{title}
    script(type="text/javascript", src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/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="postition: absolute; width: 900px; height: 650px; float: right;")
    21 changes: 21 additions & 0 deletions index.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    var express = require('express'),
    app = module.exports = express.createServer()

    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');
    });

    var maps = require('./controllers/maps_controller.js');
    app.get('/', maps.start);
    app.post('/search', maps.slugSearch);

    app.listen(3385);



    33 changes: 33 additions & 0 deletions maps_controller.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    var qStr = require('querystring'),
    http = require('http');

    exports.start = function(req, res) {
    res.render('index.jade', {layout : false,
    title : "Test",
    scripts : {source : __dirname + "/assets/handleSearch.js"}});
    }

    exports.slugSearch = function(req, res) {
    var reqBody = "";
    var reqJSON = "";

    var apiKey = "AIzaSyAfK9U3flxvP0xKDPl5I99g2tqigOIKaT8",
    client = "166148492718.apps.googleusercontent.com",
    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);
    });
    });
    }
    1 change: 0 additions & 1 deletion sample.php
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    <?php echo __FILE__;?>
  5. jfensign created this gist Mar 26, 2012.
    1 change: 1 addition & 0 deletions sample.php
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <?php echo __FILE__;?>