Maybe you recognize the object literal as similar to JSON? If that’s the case, you are absolutely right. JSON is a subset of the object literal with the difference that object literals can contain functions, something that JSON cannot.
To read more about object literals and JSON, check out these articles:
“Show Love to the Object Literal”
www.wait-till-i.com/2006/02/16/show-love-to-the-object-literal/
“JSON in JavaScript”
www.json.org/js.html
“JSON Is a Subset of the Object Literal”
http://snook.ca/archives/javascript/json_is_a_subse/
CHAPTER 3 ■ CREATING YOUR FIRST MAP
Making the Code Run on Page Load
You want this code to run once the web page has loaded. If you tried to use your code as it is now, the map won’t load, and you will get an error deep inside the Google Maps API. That’s because the <div> has not yet been loaded in the browser when your JavaScript is loaded. What this means is that
document.getElmentById('map') won’t find anything and will return null. This happens because when it runs, the <div> doesn’t exist in the browser. Because you now pass a null value to the Google Maps API instead of a container, it will have nowhere to insert the map, and an error will occur.
To get around this, you need to wait for the document to load before you run the script. This is done by utilizing something called event listeners. The window object, which is the “mother” object of a web page, has an event listener called onload that is triggered when the entire web page has finished loading.
By using it, you make sure that your map <div> exists before running the script.
The basic construction of it looks like this:
window.onload = function() { // Code we want to run }
What you do is that you assign an anonymous function to the onload event of the window object. So when the onload event is triggered, the code inside the anonymous function is executed. Anonymous functions are functions without names. Since they don’t have names, they can’t be reused, but they are still very useful for containing code that will be run on situations like these.
window.onload = function() {
alert('This pops ups when the entire web page has finished loading');
}
To put this to use in your code, you simply put the code you have written so far inside the anonymous function (see Listing 3-4).
Listing 3-4. Almost There window.onload = function() {
var mapDiv = document.getElementById('map');
var latlng = new google.maps.LatLng(37.09, -95.71);
var options = { center: latlng, zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(mapDiv, options);
}
You finally have something usable! This code will create a map that’ll look like Figure 3-6. It will have all the basic functionality of a regular Google map, such as being able to zoom in and out, to pan the map, and to change the map type.
Figure 3-6. Your first map
Encapsulating the Code
Although you now have a functioning map, you’re not quite done. You are currently cluttering the global namespace with all your variables. This might not be a big deal in a simple web page like the one you’re currently working on. But if you’re constructing a map that will be part of a bigger project, using global variables can turn out to be a big problem. The problem that can arise is that naming collisions between conflicting code occur. It’s therefore important to contain your code so that you isolate it from the outside world.
To make sure that your code doesn’t clutter the global namespace, you will encapsulate it inside a self-executing anonymous function. The pattern looks like this:
(function() { // The code })();
CHAPTER 3 ■ CREATING YOUR FIRST MAP
It might look a bit odd, but it’s really quite clever. First, an anonymous function looks like function() { }. By encapsulating it inside a set of parentheses, you return the function to the rest of the code. The parentheses at the end immediately execute the function, which means that the code inside will run immediately but will be invisible to all code outside it.
It might be easier to understand if you add an argument to the function:
(function(message) { alert(message);
})('Hello Google Maps lovers');
This code will immediately execute the anonymous function, passing the text string to it, which will result in an alert being thrown with the text “Hello Google Maps lovers” (see Figure 3-7).
Figure 3-7. An alert box being thrown
This construction is one way of encapsulating code. That said, you can use other patterns to accomplish the same thing, but this is how I prefer to do it. You can use whatever pattern suits you;
what’s important is to somehow encapsulate the code.
■ Tip To read about other JavaScript programming patterns, check out the article “JavaScript Programming Patterns” by Klaus Komenda at www.klauskomenda.com/code/javascript-programming-patterns/.
Applying this pattern to the example, the final code will look like Listing 3-5.
Listing 3-5. The Final JavaScript Code (function() {
window.onload = function() {
var mapDiv = document.getElementById('map');
var latlng = new google.maps.LatLng(37.09, -95.71);
var options = { center: latlng, zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(mapDiv, options);
} })();
The map will look and work the same way, but your variables will no longer be available for outside code, thereby not cluttering the global namespace.
Creating Maps for Mobile Devices
Better support for mobile devices was one of the main goals for Google Maps API v3. It is specifically adapted to work well on advanced mobile devices such as the iPhone and mobile phones using the Android OS. Creating maps for these devices is done the same way as for desktop browsers, but since they have smaller screens and have other ways of interacting with the items on the screen, such as the zoom-to-pinch gesture on the iPhone, there are some considerations that need to be made.
Since the screens are smaller, you probably want the map to fill the entire screen. You do this by setting the height and width of the <div> containing the map to 100 percent.
For the iPhone, there’s a special <meta> element that can be used for disabling the zoom-to-pinch behavior for the browser. The <meta> element must be positioned within the <head> section of the web page; it looks like this:
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
You should also be aware that there’s no such thing as hover (mouseover) on mobile devices, so you shouldn’t build functionality that relies solely on that being available.
You can find more information on how to develop web pages specifically for these devices here:
• Safari Dev Center (iPhone)
http://developer.apple.com/safari/
• Android Developers
http://developer.android.com/index.html
Summary
In this chapter, you learned how to set up a web page and how to insert a fully functional Google map in it. The map has all the basic functionality, which means that you can pan it, zoom in and out of it, and change the map type. You now have a solid map to build from. You also learned about some of the basic features of the JavaScript language.
With the knowledge gained from this chapter, you’re ready to examine how you can tweak the map to look and behave the way you want, and that’s exactly what you’re going to do in the next chapter where you will examine all the properties of the MapOptions object.
Download from Wow! eBook <www.wowebook.com>