 |
| The Hype Cycle (illustration by Jeremy Kemp) |
But back to the big tracking display. I almost just drew a picture of one, but then I thought, why not just put a Google Maps element right in the comic? That is one of the benefits of using JavaScript and CSS to make comics instead of just images. The map in the 3rd frame of the comic can be panned and zoomed just like any other Google Maps you see on other web sites.
I'm using the Google Maps JavaScript API v3, and it is fairly easy. You should be able to add a simple map to a web page in just a few minutes.
Here is how I made my map for the comic. First, here is some simple HTML for a web page that will contain a map.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Map</title> </head> <body> <p>Map of State College, Pennsylvania</p> <div style="width: 400px; height: 300px;" id='map'></div> </body> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"> </script> </html>
Make you you replace the "YOUR_API_KEY" in the JavaScript source location with your own Google API key. If you don't have one, you can get on the Google Developers Console. Just make sure you enable the "Google Maps JavaScript API v3" API for your key.
If you load that page into your browser, it won't do much. You need to create an initialize function to set up your map. Here is a slightly simplified version of the one I used in my comic.
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(40.791686, -77.856176),
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var hc1 = new google.maps.LatLng(40.790232, -77.855726);
var hc2 = new google.maps.LatLng(40.789087, -77.858451);
var hc3 = new google.maps.LatLng(40.789436, -77.856348);
var marker1 = new google.maps.Marker({
position: hc1,
map: map,
title:"Hype Cycle 1"
});
var marker2 = new google.maps.Marker({
position: hc2,
map: map,
title:"Hype Cycle 2"
});
var marker3 = new google.maps.Marker({
position: hc3,
map: map,
title:"Hype Cycle 3"
});
}
First, I create an object for passing options into the map constructor (line 3). I set the zoom level to 14, which gives me a starting zoom level pretty close to the street. Setting the center of the map is also done here. Coordinates can be specified by creating a new google.maps.LatLng object and passing the latitude and longitude to the constructor. I use coordinates of 40.791686, -77.856176 because that specifies downtown State College. I also set disableDefaultUI to true to get rid of all the zoom, street view, directions, and satellite view controls. I just want a plain map.
To create the map object which will take the place of the empty "map" div, I create a new map object passing in the DOM node of the div and the map options (line 9).
I put three markers on my map, in different locations around downtown. I set up the coordinates by creating more google.maps.LatLng objects (lines 11 through 13), and then make google.maps.Marker objects starting on line 15. Each Marker is passed an object which contains its configuration. The position field is the LatLng object for the marker location, map is the map on which the marker should be placed, and title is the text you see when you hover the mouse over it.
Only one thing remains - calling the initialize function. You can't just execute it from anywhere, you have to make sure that the map itself calls it once it has fully set itself up on the page. Just add this one line of JavaScript anywhere after the function definition.
google.maps.event.addDomListener(window, 'load', initialize);
Now as soon as the Google Maps JavaScript file is fully downloaded, your initialize method will be called. Put it all together, and you should end up with a web page that looks like this, similar to what the frogs saw on their giant tracking display.
The full Maps API is fairly impressive. There's a lot more you can do with it, which I might use in later comics. Check it out for yourself and build something awesome!
 |
| Amphibian.com comic for 13 March 2015 |
No comments:
Post a Comment