Posts Tagged ‘google’
Embedded Google maps
July 14th, 2010 at 11:52 pm
I’m my company’s default webmaster, and I spent a few hours today learning how to embed Google maps into our web pages. I figured I’d write up an example before I forget.
There’s a whole family of Google Maps APIs, covering JavaScript, Flash, static images, Google Earth images, and more. The JavaScript API makes the most sense for my website. I read through the tutorial and started modifying its simple example while consulting the developer’s guide and sections of the reference.
There are dozens of possibilities for creating an embedded map. I chose a fairly simple map with a custom marker and an info window. The result looks like this static image,
and is generated by this HTML/JavaScript/CSS melange:
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3: <html>
4: <head>
5: <title>Embedded Google Map</title>
6: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7: <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
8: <script type="text/javascript">
9: function initialize() {
10: var drangLL = new google.maps.LatLng(41.74593, -88.17815);
11: var centerLL = new google.maps.LatLng(41.743, -88.18);
12: var myOptions = {
13: zoom: 15,
14: center: centerLL,
15: scrollwheel: false,
16: mapTypeId: google.maps.MapTypeId.HYBRID
17: };
18:
19: var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
20:
21: var contentString = '<span style="font-family: Helvetica, Arial;font-size: 80%">I\'m crossing this bridge in the<br />Springbrook Prairie Preserve.<br />Zoom in to see it.</span>';
22: var infoWindow = new google.maps.InfoWindow({
23: content: contentString });
24:
25: var marker = new google.maps.Marker({
26: position: drangLL,
27: map: map,
28: icon: "http://www.leancrew.com/all-this/images2010/littledrang.png",
29: title:"What am I doing?"});
30:
31: google.maps.event.addListener(marker, 'click', function(){infoWindow.open(map, marker);});
32: }
33:
34: </script>
35: <style type="text/css">
36: #map_canvas {
37: height: 500px;
38: width: 600px;
39: display: block;
40: margin-left: auto;
41: margin-right: auto;
42: }
43: </style>
44: </head>
45: <body onload="initialize()">
46: <p id="map_canvas"></p>
47: </body>
48: </html>
Line 7 imports the API, and Lines 8-31 use its methods to generate the map.
A variable for the position (latitude and longitude) of the marker is defined in Line 10, and one for the position of the initial center of the map is defined in Line 11. The options for the map itself, defined in Lines 12-17, set the initial zoom, center, and map type. I also decided to disable zooming with the scrollwheel, one of Google’s stupider ideas and a behavior that drives me crazy. It’s called a scrollwheel because it’s for scrolling. Google Maps is the only place I’ve seen a scrollwheel used for zooming.
The map is created in Line 19 using the options defined earlier. It’s placed in the item with ID map_canvas, which is the paragraph in Line 46.
The info window and its contents are defined in Lines 21 and 22. Pretty much self-explanatory, I think.
The custom marker is defined and added to the map in Lines 25-29. By default, the bottom center of the image is placed at the given position; this can be changed if there’s another point on your image that you want to be the “hot spot.” I didn’t bother.
Line 31 associates the info window with the marker and caused it to appear when the marker is clicked.
Lines 35-43 set up some simple CSS properties for the map.
Finally, the map code is invoked via the onLoad handler in the <body> tag on Line 45.
The result is a map with my head on the bike path in the Springbrook Prairie Preserve. You can do all the panning and zooming you’re used to in Google Maps. Clicking on my head pops up the info window.
The coding was pretty simple; the most time-consuming part was getting the latitude and longitude of the marker just right. If you zoom all the way in, you’ll see that my head is on a bridge over a small creek. To get it centered on the bridge I had to define the latitude and longitude in drangLL to 5 decimal points.
Webfonts for the 18th century
May 20th, 2010 at 9:28 pm
This morning, in a burst of pure genius, Dan Sandler (@dsandler) tweeted this:
Attention all 17th–18th century blogger-scholars: Your font needs have now been met. http://code.google.com/webfonts/list?family=IM+Fell
Sure enough, if you follow that link you’ll be taken to the preview page for IM Fell, an old-looking family of fonts, now available as webfonts through the auspices of the Google Font Directory.
I’m not a 17th or 18th century blogger, but I do follow an 18th century Twitterer, @DrSamuelJohnson, whose Tweets do ring with the Sound of RASSELAS.
I thought it would be fun (and easy—if it weren’t easy I wouldn’t have bothered) to rejigger Dr. Twoot to display Dr. Johnson’s tweets in IM Fell English.
First, I linked to IM Fell English in the <head>:1
<link href='http://fonts.googleapis.com/css?family=IM+Fell+English' rel='stylesheet' type='text/css'>
Then I used the Twitter API to detect tweets by the user DrSamuelJohnson and wrapped those in <span class="c18th">...</span> tags. With this addition to the CSS style file,
span.c18th {
font-family: 'IM Fell English', 'Lucida Grande';
font-size: 18px;
}
I was done. The font size had to be kicked up a bit because IM Fell English is on the small side.
Here’s how it looks.
Ten minutes of work that makes me smile whenever Sam Johnson’s tweets appear. If you’re so inclined, you can dig into the details at Dr. Twoot’s GitHub repository.
Google Maps bike route fix
April 8th, 2010 at 9:24 am
As I said at the end of this post last month, I sent Google a bug report about their new bicycling directions. I had tested out the new feature by asking it for the directions from my home to office, a route that I bike almost every weekday 8-9 months of the year. The directions it gave me were pretty good, but had one dangerous (and, frankly unnecessary) crossing of a busy street at an uncontrolled intersection.
Google recognized from the beginning that their biking directions could be dangerous, or at the very least, unusable, so they asked for bug reports,
and I sent them one. This morning I got a reply:
Your Google Maps problem report has been reviewed, and you were right! We’ll update the map soon and email you when you can see the change.
Report history
Problem ID: AFDB-B658-AA9C-22A1Your report: 1. No one can safely ride a bike on this stretch of Ogden Ave. There’s far too much traffic and the speed limit is too high. 2. There’s no traffic light at this intersection. This, combined with the volume of traffic on Ogden, makes it almost impossible to cross this intersection to get to the bike path on the south side of Ogden. The safer way to cross Ogden is at the Frontenac intersection one block west, where there are traffic lights.
—
Thanks for your help,
The Google Maps team
Just for the record, I don’t need an exclamation point at the end of a sentence telling me I’m right. I’m actually accustomed to being right—it’s not a surprise. Maybe it is a surprise to Google when someone else is right.
Anyway, it’s nice to see Google being responsive to user input like this. I’ll be interested to see if they use my suggested change when they update the directions.
Bike mileage and spreadsheet embedding
April 4th, 2010 at 10:50 am
Early last month, I started another spreadsheet at Google Docs to track my bike mileage for the year. It’s simply a copy of last year’s spreadsheet, which worked out quite well. Here’s a live embed of the spreadsheet that will update through the year.
It’s not that I think you’re all that interested in tracking my mileage, but you may be interested in how easy it is to get a live spreadsheet embedded in one of your web pages. The code is simple:
<iframe width='480' height='350' frameborder='0' src='http://spreadsheets.google.com/pub?key=trN2LJ1ZLa6cX3ug7RRpDFQ&output=html&widget=true'></iframe>
The width and height parameters don’t scale your spreadsheet as they would with an embedded <img>; they just control how much of it is visible at one time. If it’s wider (as mine is) or taller than the given values, scrollbars will appear. The src parameter, of course, refers to the spreadsheet itself. You get this entire block of code from the “Publish to the web” dialog that’s accessed via the “Share” button on the spreadsheet.
If you’re interested in having your own bike (or running) mileage spreadsheet, you can copy my template into your own Google Docs space by clicking this link. The instructions, such as they are, for using it are in my post from last year.
Google bike directions
March 10th, 2010 at 11:59 pm
I’ve been using Google Maps to choose bike routes for years. The route I took today from my office to downtown Naperville, for example, uses a set of residential streets and sidewalks along busy roads that I first found by studying its aerial photos. Now Google has a specific option for getting bicycling directions.
I tried it out by entering my home and work addresses. Most of the route it came up with matches my regular path, but one spot was horribly wrong.
First, Google wants me to ride along Ogden Avenue, which is suicidal, although this instruction may not be as bad as it seems, since no one would be stupid enough to ride in a busy street when a there’s an asphalt path (that’s the bright green line) that’s not only close by, but actually cuts a corner.
No, the real problem is crossing Ogden at Meadow Lakes Boulevard. During rush hour, cars can barely cross that intersection. There’s no traffic light, and Ogden—the main east-west street in the area—has two through lanes and one turn lane in each direction. And there’s no median, so there’s no way for you to cross halfway when one direction is clear and wait in the middle until the other direction clears. Google’s Street View for the intersection shows cars in every lane, and I can guarantee you the Street View photos weren’t taken at rush hour. Just riding on the bike path parallel to Odgen is a pain at this intersection, because drivers on Meadow Lakes are always pulling forward to block the path.
Weirdly, there are traffic lights a block east and a block west of this intersection. Either would be better than trying to cross here.
Google recognizes that its biking directions may be wrong. Here’s the warning/disclaimer that comes with them:
I filled out the little web form that pops up when you click that link, and I have little doubt that Google’s bicycling directions will improve quickly. Still, I think it’s odd to use the term beta for this product. Losing your data is a risk beta testers are used to. Here, you stand to lose a bit more.