Getting started with AJAX and Google Street View


AUT

 

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
$wikiElem.text(“”);
$nytElem.text(“”);

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

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

var streetviewUrl = ‘http://maps.googleapis.com/maps/api/streetview?size=600×400&location=’ + address + ”;
$body.append(‘<img class=”bgimg” src=”‘ + streetviewUrl + ‘”>’);

return false;
};

$(‘#form-container’).submit(loadData);

Sample Code for HTML:

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

<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>
</form>

<hr>

<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>
<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>
</div>

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

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s