Google Maps API 2: The second post. Multiple locations, Map styling, and the new geolocation.

Back into the fold with, This new post goes over the new way they want you to geocache (I wasn’t doing it quite to standard before and it no loner works) as well as all sorts of fancy things that I didn’t get a change to cover last time.

Introduction

In my previous article on the subject, Working with the Google Maps API (v2/v3), I covered the basics of the Google Maps API, both the static 2d image and interactive v3 javascript based maps. That article covers the basics, getting a map and putting a location on it. Today, by suggestion of a commenter Toure, I’ll be going over how to show multiple locations on the maps, as well as color customization so you can get the look your after.

Multiple Locations, V2 Static Maps

This one is really quite simple, start with the code we got the the last Google Maps post, should look something like this:

http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=400×300&maptype=road&
markers=219+4th+Ave+N,+Seattle,+WA+98109&sensor=false

That should be pretty self explanatory, the zoom and size are what they say, the sensor is always false, and the markers variable is the point you want. As the name suggests, markers is where you need to make your changes, simply add in the additional points, separated by pipes (the “|” character, right above return on most US keyboards). So while above we have a map pinpointing the Space Needle, by adding a couple pipes and new address we have this:

http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=400×300&maptype=road&
markers=219+4th+Ave+N,+Seattle,+WA+98109|200+2nd+Avenue+NorthSeattle,+WA+98109|
325+5th+Ave+N,+Seattle,+WA+98109&sensor=false

That map is of the Space Needle, Seattle Science Center, and the EMP Museum. The center point of multi point maps is in the geographic center of all the points, so keep in mind that a map with highly varied points are usually pretty useless.

Styling Maps, V2 Static Maps

Stylizing the maps is not as straight forward as adding multiple locations unfortunately. First were going to have to add a style variable to the url and then give it a properly formatted value. This is the part thats a little confusing, lets start with an example that will turn the entire map shades of orange:

style=feature:all|element:all|hue:0x995500

take a look:

http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=900×600&maptype=road&
style=feature:all|element:all|hue:0x995500&markers=219+4th+Ave+N,+Seattle,+WA+98109|
200+2nd+Avenue+NorthSeattle,+WA+98109|325+5th+Ave+N,+Seattle,+WA+98109
&sensor=false

The feature is the part of the map you want to modify, in this case were using all for everything, but it could be limited to something like road, landscape, or transit. All the values are pretty self explanatory, but there are a lot of them. You can see the full list on the Google Maps API Map Type Style Features list. The element is simple as it only has 3 possible settings, all – which changes both the label and the map element, geometry – which changes just the map element,  and labels – which, you guessed it, just changes the map labels.

Now that you’ve selected an element you can change it’s color. This is done using an HSL system. For graphic designers Hue Saturation Light should be easy but for those out there who aren’t familiar with it it might be a little tricky to get the hang of. First were going to adjust the hue. in the above example we give it the value 0x995500, if you remove the 0x from the print your left with what would be a standard html color, only difference here is that it doesn’t matter how big a value you give it it will never get and lighter or darker, so 0xff0000 is the exact same is 0x110000.

To make the color brighter or darker we have to adjust the lightness and saturation. Simple put, lightness makes something closer to black or white. The values for these are between -100 and +100, so if you want a white element you would give it a lightness of 100, and for black -100. Saturation on the other hand makes it closer to gray or more colorful, so if you wanted a bright red you would use 100, but if you wanted a grey you would use a -100. If this seems a little confusing it’s best just to take the example a bit further down and start playing around a bit, easiest way to learn the system.

There are a couple other options, first of which is gamma. which can be any number between .01 and 10.0, it default to 1.0 if you don’t know what gamma is it’s kinda difficult to explain, basically it changes the contrast without effecting white or black, unlike a traditional contrast setting. You can also change what is seen and what detail is put into it by changing the visibility options, it’s values are straight forward: on, off, or simplified. Turning visibility to simplified removes most labels, creating a neat clean map thats more artistic than practical. Take a look.

I’ve made a couple examples of how you might want to go about changing things. You can change more than one value (hue saturation lightness visibility) at a time by separating them with pipes and if you want to change more than a single element you can simply add another style variable to the url, it seems to parse them in the order they are placed. It’s not a perfect system, sometimes thing that should change dont (like the roads being left white in the first example) and sometimes one command will override the other (thats why the desaturation of the entire first map is only at -99, -100 turned the water red and overriding that alone wouldn’t fix it. You may need to play around a bit to get it to work right. Also, messing with the urls inline is a real pain, I suggest using a simple tool to program the url across multiple lines, I’ve built a super simple Google Maps Multi-line URL Helper when writing this, it’s incredibly basic but it helped alot, if your having problems check it out. Anyway, some examples.

Simplified, desaturated map with red roads, dark read highways, and blue water (as mention above the white side roads are glitch and canned be made red no matter what commands I seem to throw at Google):
http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=900×600&maptype=road&
style=feature:all|element:all|visibility:simplified|saturation:-99&
style=feature:road|element:all|hue:0x010000|saturation:100&
style=feature:road.highway|element:all|hue:0x010000|saturation:100|lightness:-50&
style=feature:transit|element:all|hue:0x010000|saturation:100&
style=feature:water|element:all|visibility:simplified|saturation:100|hue:0x0033ff|lightness:-15&
markers=219+4th+Ave+N,+Seattle,+WA+98109|200+2nd+Avenue+NorthSeattle,+WA+98109|
325+5th+Ave+N,+Seattle,+WA+98109&sensor=false

A night style map, black and gray land and red streets:
http://maps.googleapis.com/maps/api/staticmap?zoom=14& size=900×600&maptype=road&
style=feature:all|element:all|visibility:simplified&
style=feature:all|element:all|saturation:-100|lightness:-50&
style=feature:road|element:all|hue:0xffcc00|saturation:100&
style=feature:water|element:all|visibility:simplified|lightness:-100&
markers=219+4th+Ave+N,+Seattle,+WA+98109|200+2nd+Avenue+NorthSeattle,+WA+98109|
325+5th+Ave+N,+Seattle,+WA+98109&sensor=false

Finally a super saturated map with none of the street labels (but all the rest):
http://maps.googleapis.com/maps/api/staticmap?zoom=14&size=900×600&maptype=road&
style=feature:all|element:geometry|saturation:100&
style=feature:road|element:all|visibility:simplified&
markers=219+4th+Ave+N,+Seattle,+WA+98109|200+2nd+Avenue+NorthSeattle,+WA+98109|
325+5th+Ave+N,+Seattle,+WA+98109&sensor=false

Unfortunately due to the somewhat erratic way Google handles your styling theres a lot of trial and error involved, if your getting a headache dealing with it all try using the simple Google Maps Multi-Line URL Helper I made, breaking it into lines makes it much much clearer. Also, dont forget the first Google Maps example I made has an example that includes all the levels of zoom so you can quickly find the one your after, check it out in the on the Google Maps API v2/v3 example page. Note that javascript map is broken, Google seems to have changed something , but were going to go over that next. Another thing to keep in mind, Google doesn’t like URLs larger than 4096 character (neither does Internet Explorer, the two are probably related), so many locations or advanced styling may have you hitting the limit. If your generating the images procedurally you may want to put a check in to prevent your script from spiting out broken image links.

Basics Revisited, V3 Javascript Maps

At some point sine my last post on the matter google changed their API and the old post examples no longer work, instead of fixing those (which would have been quite a rewrite) I decided to make a new writeup on it using only the V3 APIs, this should work for a while longer than the last one did, that was using some undocumented features.

The first set in creating a map is to include the google maps javascript. It’s a pretty standard call, although it has a couple get variables for your API key and for wether or not your using an device with a location sensor. Generally, I set the sensor to false as browser don’t have them and thats the primary target but if you are focusing on mobile you may want to consider turning it on. The script to include is located at the following location:

http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyDgFOuDWqvc2lKBvzsVugBixoCXcabWjqQ

Note that the API key will only work for me, your going to need to get your own. I’ll let google walk you through that drawl affair: Google Maps Javascript API – Obtaining an API key. Now that we have that out of the way we need to add a div element to place the map in and give it an element ID, for these examples the map is going to be located in a div with the id the_map. This div must have a size set or the google maps script will not know what to load and, in turn, load no map. Now that thats taken care of and you’ve included your script with a proper API key we can start scripting.

First things first we need to wait till the window is ready, so we know the map div is in position. Then we need to get the coordinates of the address we want. For this example I’ll be looking for 5510 University Way NE Seattle, WA 98105, Jet City Improv in the University District of Seattle. Once we make the request we can check if it all went ok or if something went wrong.

Now, assuming we don’t get an alert about a bad address, we can go on to make the map. Were going to be adding a map and a marker in this setup. This is a two part process, first we add the map.

That is going to create a basic map, at zoom level 8, centered around the geocoding results location. The center of the map is naturally defined by the center option, which is in the option object, the section variable passed to the Map function. The center and zoom are the only required options, any others you add are completely up to you. In this example I’m setting the zoom to 8, this is an arbitrary setting and you can make it whatever you’d like however some map types don’t some in as far s other and it may kick you out of the desired map type to the roadmap instead. I’m also changing the may type to the terrain map using the mapTypeId option. The valid options for that are ROADMAP, TERAIN, SATELLITE, and HYBRID. They all behave the same way you’d expect. There are tons of other options that I wont be going over in this example, but if you’d like to take a you should check out the Google V3 Javascript API map options page.

Now the above code alone will create a map that is centered at the a specific point, but without a marker it’s a little useless, so were going to add one of those next. Markers also need a location to be added, luckily we still have the location from the geocode from when we got our center point, so we can just re-use those:

And just like that our map has a point on it. The map markers have several options you can play with, but were going to leave them out of this example. You can view the above code running al the Google Maps V3 Javascript Basic Example page. Now that we got the basics out of the way we can move on to more advanced things, namely multiple locations and custom styles.

Multiple Locations, V3 Javascript Maps

The google geocoder doen’t support multiple locations at once, so for this were going to have to get a little bit tricky. First, lets create an array of addresses, in this case I’ll go back to using the previous 3 addresses, the Space Needle, Seattle Science Center, and EMP Museum. Again, once we know the window is ready we’ll start, this time by defining our addresses in the addrs array, as well as creating a blank array for the markers that we will fill with the appropriate locations, and a marker_num varible to keep track of some internal positioning.

After we have those defined were going to create a new geocode and a new LatLngBounds. The geocode will be doing the same thing as in our previous example, and the LatLngBounds will be helping us determine our center point, so we can have the map properly centered. This is the code so far:

Now that we got that all set up it’s time to get to the nitty-gritty of it all and start processing those addresses. First we’ll look through each address and give it a shorter, cleaner variable, then once again we’ll pass it to the geocoder. This time instead of just instantly creating a map once were done were going to first add the location to the LatLngBounds() with the extend function, then were going to add them to our markers array so we have them stored, ready to place as markers once we do get to create our map. Finally were going to check if were on the last address, because in the next step thats when were going to create the map and place the markers.

Notice how were just re-using the location over and over, this prevent pointless extra geocoder calls, help with both speed and hitting the google API limit (which they do enforce). So now we’ve got all out locations and extend our LatLngBounds() with all the points, we have our markers and our center, we can finally build the map and add the markers. This part is very similar to the above example, except that we use the getCenter() function as our map center.

Alright, we have out map and it’s centered in the middle of all the points we’ve given it, now it’s almost useful. I’ve added another map option in this example, I disabled street view. Why, because I can, theres really no more reason to it. Remember that google has a full list of all the map options you can play around with on the Google Maps Javascript API Map Options page. Also I’ve left the zoom the same, not because it makes the most sense, but because I’m going to change the zoom later so that we can see all of the markers on the map. Now, for the final bit of usefulness, were going to add those points as markers.

All thats doing is looping through the markers one by one, giving it a cleaner variable name, then adding it to the map. I’m also passing a couple new options this time, icon, which defined a custom icon for the marker, just give it the url of an image and it will take care of the rest (although if you want to get fancy there are a ton of tweaks you con do to that, there all listed at the Google Maps Javascript API Marker Image Options page. I’m also giving the options a nice mouse over text with the title of the real address by using the title option. This is still only a few of the things the google maps api lets you do so if you want the complete list check out the Google Maps Javascript API Marker Options page. Finally, theres just one last thing to do, adjust the zoom of the map to show all the points, luckily thats only a single line of code.

And with that we should have a nice, marked map that is both centered and properly zoomed. I have an example of this (with styling, which I’ll go over next) Google Maps V3 Javascript API Full Example, feel free to check it out. I also have both the basic and the full (multiple locations, stylized map) available in a download at the end of the post (just scroll down and find the last chuck of text). Finally were on to the last part, stylizing the javascript maps.

Styling Maps, V3 Javascript Maps

To style maps we want to change the options after we’ve made it and include the new styles as this seems the most reliable way of doing it. With that in mind this is only going to cover the styling portion, which you would place after the map has been created in either of the previous examples. First lets look at a simple style example:

By calling map.setOptions() we can add new options to the map, and in this case those options are going to be new styles options. Styles are stored in elaborate arrays but have the same basic parts of the static V2 maps API, although their formatting makes them much easier to understand. The first 2 parts we need to look at are the featureType and the elementType, these control what your selecting. In this example were selecting everything, but we can reduce that dramatically. The featureType has a bunch of options like roads, water, transit, ect. a full list of which can be seen on the Google Maps Javascript API Map Options page. The elementType is simple as it only has 3 options, “all”, “labels”, and “geometry”, all of which are pretty self explanatory.

The stylers is where you can to change things. Like the static maps it’s done with a HSL system, with a few extra options like gamma and visibility. Hue selects the color on a standard hue wheel, this can either be a number representing it’s angle or, like I’ve done above, a hex code for the color. Note that this is only selecting the hue, not lightness or the saturation, so #010000 is the same as #ff0000. Again as with the static maps saturation and lightness, which control color intensity from gray and full color and brightness from black to white respectively have ranges from -100 to +100.

The other options are pretty straight forward, visibility can either turn things “on”, “off” or to “simplified” which removed most labels. Finally gamma controls the relative contrast, so you can tweak the image to make some things have more pop or clarity than others. The best way to figure the HSL system out if your not familiar with it is to simply play around a bit and you should get the hang of it in no time.

If you want to control the style of multiple things at once you can simple add more styles objects to the array. They seem to fire off in the order they are added and while I noticed a few quirks it’s for more predictable that the static maps API. In the Google Maps API b# Javascript Full Example I’ve changed the map dramatically, making it primarily grayscale with only manmade things (roads and land) changed to shades or orange. This is a completely different look and only took 7 style options to make it. The system is very powerful once you get the hand of it.

Conclusion

Phew. That was a long post. It should cover pretty much everything you need to know to get google maps up and running in your site though. I have the code in a couple of Snipplr posts (Google Maps V2 Static Map example, Google Maps V3 Javascript Basic Example, and Google Maps V3 Javascript Full Example) as well as some github gists (Google Maps V2 Static Map, Google Maps V3 Javascript Basic, and Google Maps V3 Javascript Full). This post was written in one big chunk and it’s quite long so this time more than ever is something sin’t working for you or it’s neat clear enough or you have some question let me know either in the comments below or on the specific Snipplr Post or Github Gist. You can also leave a message on the Google + post about this and I’ll get it too. Finally, Both the Simple Javascript and the Full Javascript examples are available, if your having problems I suggest you take a look at them as there pretty clean and straight forward.

If your not wanting to spend the time, or my explanation just isn’t good enough, you can always download the scripts created above and modify them to suit your needs. These are the same scripts as the example but as a convient zip archive, feel free to download the Google Maps API v3 Javascript Maps Examples archive and take a look. Finally I think thats really it, if you read the entire post your a trooper, thanks.

2 Replies to “Google Maps API 2: The second post. Multiple locations, Map styling, and the new geolocation.”

    1. I’m currently waiting on some new hardware to come in (should be here by the 31 at the latest) and then I can take a look at it, what specifically were you looking to implement (do you have any examples of things your trying to mimic)?

Leave a Reply

Your email address will not be published. Required fields are marked *