Dr. Martin Zhao Sept 4, 2015. Topics HTML and related tutorials on w3schools.com Related HTML tags...
-
Upload
raymond-fowler -
Category
Documents
-
view
213 -
download
0
Transcript of Dr. Martin Zhao Sept 4, 2015. Topics HTML and related tutorials on w3schools.com Related HTML tags...
![Page 1: Dr. Martin Zhao Sept 4, 2015. Topics HTML and related tutorials on w3schools.com Related HTML tags Adding interesting features using JavaScript What is.](https://reader036.fdocuments.net/reader036/viewer/2022083006/56649f385503460f94c55033/html5/thumbnails/1.jpg)
Google Maps APIDr. Martin Zhao
Sept 4, 2015
![Page 2: Dr. Martin Zhao Sept 4, 2015. Topics HTML and related tutorials on w3schools.com Related HTML tags Adding interesting features using JavaScript What is.](https://reader036.fdocuments.net/reader036/viewer/2022083006/56649f385503460f94c55033/html5/thumbnails/2.jpg)
Topics HTML and related tutorials on
w3schools.com Related HTML tagsAdding interesting features using JavaScriptWhat is Google Maps API?Application mashup using Google Maps APIJSON: JavaScript Object Notation
![Page 3: Dr. Martin Zhao Sept 4, 2015. Topics HTML and related tutorials on w3schools.com Related HTML tags Adding interesting features using JavaScript What is.](https://reader036.fdocuments.net/reader036/viewer/2022083006/56649f385503460f94c55033/html5/thumbnails/3.jpg)
Elements of HTML: Tags Found in (almost) all HTML
<head> <body>
Block level elements<p> <div>
Embedding programs<script>
![Page 4: Dr. Martin Zhao Sept 4, 2015. Topics HTML and related tutorials on w3schools.com Related HTML tags Adding interesting features using JavaScript What is.](https://reader036.fdocuments.net/reader036/viewer/2022083006/56649f385503460f94c55033/html5/thumbnails/4.jpg)
JavaScript: What Can You Do With It?JavaScript is the programming language of HTML
and the Web JavaScript Can Change HTML ContentJavaScript Can Validate DataJavaScript Can Change Images
![Page 5: Dr. Martin Zhao Sept 4, 2015. Topics HTML and related tutorials on w3schools.com Related HTML tags Adding interesting features using JavaScript What is.](https://reader036.fdocuments.net/reader036/viewer/2022083006/56649f385503460f94c55033/html5/thumbnails/5.jpg)
How to Mark Places on a Map?You have options:
Make you map with place marked and include it in your HTML
Include a map with a <canvas> tag (available in HTML5) and use JavaScript to draw markers on it
Using Google Maps APIPros and Cons
![Page 6: Dr. Martin Zhao Sept 4, 2015. Topics HTML and related tutorials on w3schools.com Related HTML tags Adding interesting features using JavaScript What is.](https://reader036.fdocuments.net/reader036/viewer/2022083006/56649f385503460f94c55033/html5/thumbnails/6.jpg)
What is API?Application Programming Interface
What does each word mean?
Your progra
m
Reusable
Program Library
API
![Page 7: Dr. Martin Zhao Sept 4, 2015. Topics HTML and related tutorials on w3schools.com Related HTML tags Adding interesting features using JavaScript What is.](https://reader036.fdocuments.net/reader036/viewer/2022083006/56649f385503460f94c55033/html5/thumbnails/7.jpg)
How to Use the Maps API?Load the Google API: it’s for JavaScript
<script src="http://maps.googleapis.com/maps/api/js"></script>
Set Map PropertiesCreate a Map Container: a <div> elementCreate a Map ObjectAdd an Event Listener to Load the Map
![Page 8: Dr. Martin Zhao Sept 4, 2015. Topics HTML and related tutorials on w3schools.com Related HTML tags Adding interesting features using JavaScript What is.](https://reader036.fdocuments.net/reader036/viewer/2022083006/56649f385503460f94c55033/html5/thumbnails/8.jpg)
Passing Data to a Mashup AppMOM: mercury concentration contour
overlayhttp://theochem.mercer.edu/mapvis
JSON: JavaScript Object NotationDatabase accessibility