Getting started with AJAX and Google Street View



Sample Code for JS:

function loadData() {

var $body = $(‘body’);
var $wikiElem = $(‘#wikipedia-links’);
var $nytHeaderElem = $(‘#nytimes-header’);
var $nytElem = $(‘#nytimes-articles’);
var $greeting = $(‘#greeting’);

// clear out old data before new request

var streetStr = $(‘#street’).val();
var cityStr = $(‘#city’).val();
var address = streetStr + ‘, ‘ + cityStr;

$greeting.text(‘So, you want to live at ‘ + address + ‘?’);

var streetviewUrl = ‘×400&location=’ + address + ”;
$body.append(‘<img class=”bgimg” src=”‘ + streetviewUrl + ‘”>’);

return false;


Sample Code for HTML:

<!DOCTYPE html>
<html lang=”en”>
<meta charset=”UTF-8″>
<title>Your Moving Companion</title>
<link rel=”stylesheet” href=”css/style.css”>

<form id=”form-container” class=”form-container”>
<label for=”street”>Street: </label><input type=”text” id=”street” value=””>
<label for=”city”>City: </label><input type=”text” id=”city” value=””>
<button id=”submit-btn”>Submit</button>


<h2 id=”greeting” class=”greeting”>Where do you want to live?</h2>
<div class=”wikipedia-container”>
<h3 id=”wikipedia-header”>Relevant Wikipedia Links</h3>
<ul id=”wikipedia-links”>Type in an address above and find relevant Wikipedia articles here!</ul>
<div class=”nytimes-container”>
<h3 id=”nytimes-header”>New York Times Articles</h3>
<ul id=”nytimes-articles” class=”article-list”>What’s going on in your new city? Enter an address and hit submit and the NY Times will tell you here!</div>

<script src=”js/libs/jquery.min.js”></script>
<script src=”js/script.js”></script>



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s