Google Maps, now with better terrain shading (old version on top). Image: Google

Google Maps continues to crank out the updates; the default map view has been updated with new shading detail to convey terrain information, along with color gradations to depict vegetation and labels for natural land formations.

The amount of terrain detail shown varies depending on which part of the world you’re looking at and how far you’ve zoomed in, but for the Americas and Europe major geographic features are now shaded and labeled.

“This enriched visual data allows you to quickly and easily see where the great forests, deserts, and mountain ranges around the world begin and end,” writes Karl Johann Schmidt, Google Maps Software Engineer, on the company’s Google Maps blog. “It also conveys how natural land formations can impact where, how and why man-made developments like urban cities, dams and bridges are made.”

I’m not sure how many people (aside from us map nerds) browse Google Maps to study how and why cities and other developments came to be where they are, but there is another side effect — the basemap now looks more interesting. The slight shading for textures and the green of forests break up what was previously just vast expanses of white. And in my testing on the desktop, mobile and Android Maps app the new visual overlays did not make Google Maps noticeably slower.

The new terrain features in the basemap aren’t anywhere near as detailed as the terrain overlays that can be added from the Google Maps menu widget, but they do add more information to the default map, which is likely the only map most users ever see.

Google Maps versus Apple's new custom maps on iOS.

The move comes after several big names — including FourSquare and Apple — publicly ditched Google Maps in favor of OpenStreetMap. While neither Apple nor FourSquare has explicitly cited the price increase as a factor in its decision, Google’s Geo Developer blog makes it clear that price was a factor for some users.

“We’ve been listening carefully to feedback,” reads the announcement, which goes on to add “some developers were worried about the potential costs.”

The vast majority of maps hackers and casual developers will probably never be affected by the coming Google Maps pricing structure since the Google Maps API will still be free for the first 25,000 views per day. According to Google only 0.35 percent of sites using the Maps API regularly exceed those limits.

Still, for developers who dream of creating a wildly successful site that does reach those traffic numbers, the Google Maps API will soon be another cost to factor into the plan. And that may be enough to dissuade some from using Google Maps. The price drops may help, but it’s going to be increasingly difficult for big services to justify even the lower price of the Google Maps API when OpenStreetMap is available for free.

Google Maps vs Apple's custom maps. Note the increased road/path detail from OpenStreetMap visible in the Apple version of this map of Vienna, Austria.

The new low-contrast look for iPhoto’s map is distinctly Apple’s, but what’s more interesting is that much of the data behind the maps comes from the open source mapping project OpenStreetMap.

For those unfamiliar with it, OpenStreetMap is an open source project that maintains an editable map of the entire globe. Anyone can make edits and add data to the map, which is why it’s often called the “Wikipedia of maps.” Although OpenStreetMap has been around for some time, it’s recently become considerably more visible as part of Microsoft’s Bing Maps. Additionally some high-profile websites are starting to move away from Google Maps — like Foursquare, which recently ditched Google Maps in favor of OpenStreetMap.

Now, with iPhoto for iOS, Apple is joining the OpenStreetMap party as well.

Apple is using OpenStreetMap data to display maps around the world. OpenStreetMap developers have discovered that Apple is using OpenStreetMap data in Chile, Austria, Italy and many other countries. OpenStreetMap is not, however, being used for the United States. In the U.S. map data appears to be gleaned from a number of sources, including the U.S. Census Bureau and possibly the U.S. Geological Survey.

Interestingly, the OpenStreetMap data Apple is using appears to be quite old, coming from sometime around April 2010. That means that unfortunately several years worth of updates and corrections from OpenStreetMap contributors are missing from Apple’s maps. The result is a map that’s fine for something like adding location details to your vacation photos, but would likely not be accurate enough to provide navigation or directions.

In other words, don’t look for the maps in iPhoto to be the source of a revamped Maps app for iOS — in their current form these maps are just not accurate enough for navigation use.

It’s also worth noting that Apple is using OpenStreetMap data without the necessary attribution. OpenStreetMap’s Creative Commons license governing maps from 2010 requires that Apple add a notice citing the source of the data. As the OpenStreetMap blog notes, the maps are “missing the necessary credit to OpenStreetMap’s contributors; we look forward to working with Apple to get that on there.”

It’s been clear for some time that Apple is looking for a way to wean itself off Google Maps. Apple has even purchased several mapping companies, including Placebase, an online-mapping company and C3 Technologies, which creates 3D maps. Despite these moves Google Maps remain prominent on iOS. Even within the new iPhoto app Google Maps apparently still provides at least some of the data being used.

Bad news, map hackers; the Google Maps free ride may be coming to and end. The Google Geo Developers blog recently detailed some changes to Google Maps API, including new rate limits and fees. Starting next year Google Maps will charge $4 per 1,000 map loads on sites where traffic exceeds 25,000 map loads per day.

The good news is that very small sites will remain unaffected since the Google Maps API will still be free for the first 25,000 views per day (those using the Google Maps styling features will be limited to 2,500 views a day).

The bad news is that once your app or website exceeds those limits you’ll be forking out $4 for every 1,000 people that hit your site (or view a map in your mobile app). Alternately, developers can cough up $10,000+ for a Google Maps API Premier licence, which, in addition to the unlimited access offers more advanced geocoding tools, tech support, and control over any advertising shown.

Google says the new fees are intended to make sure Google Maps remains free for small developers. “By introducing these limits we are ensuring that Google can continue to offer the Maps API for free to the vast majority of developers for many years to come,” writes Google Maps API manager Thor Mitchell.

The new rates will kick in next year and are unlikely to impact small sites, which will never exceed the limits, or large sites which can afford the Premier license. The real impact is in the middle — experimental sites that do something creative with Google Maps and end up going viral. No one wants a one-off experiment to end up costing a fortune.

Fortunately, according to the FAQ, sites that exceed the limits without setting up a payment system or buying a Premier license won’t immediately be shut down. “Your maps will continue to function,” says the Google FAQ, however, “a warning may be shown on your map and a Maps API Premier sales manager may contact you to discuss your licensing options.”

In other words, Google appears to be interested mainly in collecting fees from sites with consistently heavy traffic rather than experiments that see a one-time traffic spike. It doesn’t protect against every potentially expensive use case, but it should make map mashup fans breathe a little easier.

Developers worried about the potential costs of the Google Maps API can always use OpenStreetMap, which is free and, in many parts of the world, much more detailed than Google Maps. Of course, OpenStreetMap lacks some Google Maps features, most notably an equivalent to Street View.

See Also:

• Google Maps, Now With Virtual Helicopter Rides
• Google Maps Adds More Detail, Takes a Cue From OpenStreetMap
• Microsoft Adds OpenStreetMap Layer to Bing Maps
• ‘Tile Drawer’ Makes Hosting Your Own OpenStreetMap Server Dead Simple

Fly the California coastline, without the helicopter hair

To see the helicopter preview in action, just plug in a route and then look for the little “3D” button next to your driving directions. Don’t see a 3D button? Well, that’s the major downside at the moment — limited coverage.

As far as I’ve been able to test it doesn’t seem like the 3D preview features works much outside of popular, well-known routes (like the California coast drive featured in the LatLong Blog post).

If your route doesn’t have a 3D button, fear not, there’s nothing really new about helicopter preview, save the nice integration via the new button. Google Maps has long offered an in-browser view of Google Earth, so you can always fly over your route. It just won’t be nicely automated.

For more details on helicopter view, check out the LatLong Blog. To see it in action, try out the Carmel to Big Sur route that the LatLong team demos.

In unrelated Google news, the company is now brewing beer. That’s right, Google beer (actually brewed by the folks at Dogfish Head). There’s a promo movie about the process over on YouTube.

See Also:

• Easter Egg: The Google Earth Flight Simulator

Google Street View inside the San Diego Art Institute gardens

Google has been using the modified trikes — which house a 360° panoramic camera much like the setup on the Street View cars, but smaller and lighter — since 2009. Google previously released imagery the trikes captured in places like Stonehenge and Sea World.

Combine the latest update with Google’s previous release of Street View inside buildings and it isn’t hard to imagine that, in the future, Street View may well be in your living room.

In fact, you may be the one who puts Street View in your living room. Last year Google acquired Quiksee, an app that takes normal video input and produces video tours — much like Street View, but with no special camera required. Although Google has made no announcements since the acquisition, it’s not hard to imagine the company releasing some software that allows anyone to create Street View-like images of, well, just about anywhere.

See Also:

• Microsoft Adds OpenStreetMap Layer to Bing Maps
• Google Maps Adds More Detail, Takes a Cue From OpenStreetMap
• Google and Arcade Fire Get All HTML5y
• Behind the Scenes: Coding ‘The Wilderness Downtown’

If you’re adding a map to your website, why settle for the vanilla design when you can customize it and leave your own personal mark?

This tutorial will show you how to create a custom map from scratch, then add a little unique flavor to it by replacing the standard “map pin” icon with a custom icon of your own design.

To do this, we’ll be using Mapstraction, a library that creates map code that can be reused across all the big mapping providers (Yahoo, Google, et al). Mapstraction also allows for multiple types of customization such as custom info bubbles and graphics like the one we’ll be dropping onto the map.

Note: This tutorial is adapted from the book Map Scripting 101 by Adam DuVander. Adam is a former Webmonkey contributor and executive editor of Programmable Web. In his book, he shows how to use all of the features of the most popular mapping APIs, and how to mash them up with data from other sources like events calendars, weather services and restaurant review sites to make a variety of custom maps.

This exercise comes from chapters 1 and 2 of Adam’s book, and it is reprinted here with his permission and that of the book’s publisher, No Starch Press. It isn’t a word-for-word excerpt. It has been slightly adapted to work as a web tutorial. You’ll find dozens of in-depth exercises — including the full version of this one — in the book itself.

Create a Mapstraction map

Mapstraction is a little different from Google Maps and Yahoo Maps. Mapstraction is an open source JavaScript library that ties into other mapping APIs. If you use Mapstraction, you can switch from one type of map to another with very little work, as opposed to rewriting your code completely.

Using Mapstraction limits your risk to changes being made to an API. For example, if your site’s traffic takes you beyond the limit for your chosen provider, or the provider begins placing ads on the map, Mapstraction lets you switch providers quickly and inexpensively.

To use Mapstraction, you must first choose a provider. In this example, I’m using Mapstraction to create a Google Map.

Open a new HTML file and type the following:

<html> 
  <head> 
    <title>Basic Mapstraction Map</title> 
    <script 
    src="http://maps.google.com/maps/api/js?sensor=false"   
      type="text/javascript"></script> 
    <script type="text/javascript" src="mxn.js?(googlev3)"></script> 
    <style type="text/css"> 
      div#mymap { 
        width: 400px; 
        height: 350px; 
      } 
    </style> 
    <script type="text/javascript"> 
      function create_map() { 
           var mapstraction = new mxn.Mapstraction('mymap', 'googlev3'); 
        mapstraction.setCenterAndZoom( 
          new mxn.LatLonPoint(37.7740486,-122.4101883), 15); 
      } 
    </script> 
  </head> 
  <body onload="create_map()"> 
    <div id="mymap"></div> 
  </body> 
</html> 

Just like you would for a normal Google Map, we include Google’s JavaScript (line 4).

For this code to work, you also need to download the Mapstraction files. Go to mapstraction.com or the project’s github page, and follow the instructions to save the files in the same directory as your HTML file. Best practices would dictate that you keep JavaScript files in their own directory, separate from your HTML, but I’m simplifying things for this example.

The Mapstraction files you should have, at minimum, are mxn.js, mxn.core.js and googlev3.core.js. You may also have files for other providers, such as yahoo.core.js. The only one we need to reference in our HTML code is mxn.js, which loads the other files that it needs, including those we pass it in the file name. Then, in the create_map function, we let it know which type of map we are creating.

Once you have your Mapstraction map, save your HTML file and load it in a browser. The result should look exactly like this.

This Google map, created via Mapstraction, should be centered on No Starch Press’s neighborhood in San Francisco.

As you can see, the HTML hooks are minimal. Some styling to determine the size of the map and an empty div tag with an id attribute are all that’s required. The JavaScript function create_map() takes over and makes calls to the API. This function can have any name you want.

The minimum amount of information needed within the create_map() function is a map type (googlev3), a center point (using a latitude/longitude pair) and a zoom level (Mapstraction’s tightest zoom level is 16, so I backed off one notch to 15, about six blocks across). Then, we pass those options and reference the div tag’s id to create a map.

Add a marker to your map

To add a simple marker to your map, you just need to use two Mapstraction functions. First, create the marker. Next, add it to the map. The reason for these two distinct steps will become clear in further projects when we start to use advanced options, such as custom marker icons.

Let’s see what creating the marker looks like in code. Start with the basic Mapstraction map you created and add these lines to the create_map() function:

marker = new mxn.Marker(new mxn.LatLonPoint(37.7740486,-122.4101883)); 
// marker options will go here 
mapstraction.addMarker(marker); 

The first line creates a marker object, passing latitude/longitude coordinates for the No Starch Press offices in San Francisco. By drawing attention to the graphical marker, we are essentially marking that spot as important.

The second line is a placeholder for any marker options we want to add later. (Any JavaScript line that begins with two slashes is a comment, and the browser ignores them.) The marker options are where we tell Mapstraction which icon to use or add a message to be displayed when the marker is clicked.

Finally, the third line adds the marker to the map. Once this happens, no additional options can be added. The reason is that the marker object is used only by Mapstraction. Once the marker is added to the map, however, Mapstraction makes the appropriate calls to the mapping provider. Mapstraction plots the marker based on all options set beforehand. In this case, we don’t have options to add, but we’ll add to this map in future projects.

If you’re using Google as your mapping provider, your new map will look like the picture below. The default Google icon sits in the center of the map. Although the marker is clickable, this marker is very simple and nothing actually happens if you click it.

Create a custom icon marker

The quickest way to make a map feel like your own is to change the default icon used for markers. Mapstraction has simple marker options that make the technical process of using custom icons a cinch. The more laborious part may be creating the icon file itself. To avoid this, you can find icons others have made online for free. I list several resources on my website.

Still want to create your own? Read on.

To create your own marker icon, you just need to have a graphics program that can save a transparent .png file. The icon can be whatever size you want, but keeping each dimension between 20 and 50 pixels is probably best. If the icon is too small, clicking it becomes difficult; too big, and the icon obscures the location you’re attempting to call out. If you’re using Google as your mapping provider, you also want to create an image to use as your marker’s shadow. This step isn’t necessary if your marker is a similar shape to the Google default or if you’re using another provider.

Not much of an image magician? Use the free online Shadowmaker service to create a shadow.

Add your icon to the map

Now that you have an icon, the easy part is adding it to the marker options. All it takes is setting a few values to tell Mapstraction where the icon image files resides. Your best bet is to keep custom marker icons in a special directory on your server. If you’re testing locally, you can use local copies, accessed by their location relative to the page containing the map. For simplicity, I have the HTML file and the icon files in the same directory in this example. In reality, you might prefer to be more organized.

I decided to use a teensy No Starch Press logo for my custom icon. It’s 27 pixels wide by 31 pixels high. Like I said, the icon is teensy. Then, I used the Shadowmaker service to create a file that is 43×31 including the marker’s shadow.

Finally, it’s time to code. Add these lines as marker options. These lines are inserted after a marker has been created but before the marker has been added to the map:

marker.setIcon('nostarch-logo.png', [27,31]); 
marker.setShadowIcon('nostarch-shadow.png', [43,31]); 

The only parameter you need to include is the path to the image for both the icon and the shadow. Notice that the dimensions of each graphic get passed as an inline array. This parameter is optional but recommended. If you leave it out, some providers will assume the dimensions of the default marker, which could mean a poorly scaled graphic.

The results of the custom marker code are shown below.

The No Starch Press office is marked by the company’s logo, a little iron icon. Notice the shadow, as well, which makes the graphic pop out from the map.

Omit the shadow icon at your own risk. Some mapping providers will assume the default shadow, which might look silly with your icon. Not every mapping provider uses shadows, but planning for one is good. If you really don’t want a shadow, consider using a completely transparent graphic. I show an example of shadowless icons in the weather map example in chapter 10 of my book.

See also:

• Multi-map with Mapstraction
• Microsoft Adds OpenStreetMap Layer to Bing Maps
• Google Gets a New Geocoder