DyingLoveGrape.

(home) (about) (rss)

Part 4, Section 2:
The Google Maps API.





Google Map API Basics.

(Last Update: .)

Because we would like to have a map come up in a webpage, we ought to have a bare-bones webpage to put it into. In order to do that, we'll need to make a bare-bones HTML file. Easy-peasy.

Making an HTML File.

There are literally hundreds of resources to learn HTML (and it is a worthwhile pursuit, in my opinion!) but for now we will need only a small, easy template.

Sadly, we cannot make our HTML file in Spyder. Luckily, all we require is any text editor — notepad, notepad++, Word, Wordpad, etc. If you need a text editor (which you shouldn't; they come with nearly every single operating system) for Windows you can get notepad++, for MacOS you can get TextMate, and for Linux you should know what you're doing and I'm not going to tell you what to get. In any case, whatever text editor you want to use is fine.

Open up your Text Editor of Choice and get to a new file. Here's what we'll start with; type in:

<html>
<body>

<script>
document.write("<h1>Javascript Works.</h1>");
</script>

</body>
</html>

And then save the file somewhere as test1.html. You can name it what you'd like, but this will let you know that it's just a test file that isn't too important. Next, go to your web browser of choice and File > Open your html file. You should get a screen that says, Javascript Works. If not, you may want to try opening it in a different browser or see if you've made any errors in the code. If worst comes to worst, try to find an HTML tutorial and see if one of their solutions will work for you.

Assuming everything was fine, we know that javascript will work in the browser. We will always put our javascript code between the two script brackets, the end bracket will have a forward slash before it to indicate the script is over.

Making Our Own Maps.

Looking at the example code in the documentation gives us some neat examples to try. Click on the example that says, "Simple Map". It will give you an example of the map followed by the JavaScript code which will create that map. Moreover, it gives us a tab that has the HTML and the JavaScript included in it. Let's copy and paste that into a new file in your text editor which we will save as test2.html. Open up this new file and be amazed: the map takes up the whole screen! Neato. But, unless you live by Sydney, Australia this map will mean very little to you: it always opens around there. Alas. If only we could make it center at a new coordinate...

Looing at the code in the HTML, there's a lot of potentially scary things here (especially if you don't know JavaScript). We notice right away that there are some coordinates in the line

center: new google.maps.LatLng(-34.397, 150.644),

If you look at those coordinates, you'll notice that they point right by Sydney. This is probably where the map is centering initially. Using something like this site, try to find some coordinates close to where you live. For example, "Chicago" gives the coordinates (41.878114, -87.629798). We'll replace the old coordinates with the new coordinates and see what happens. Save the file and try it out; you should see a newly-centered map at the location you chose!

Why is my page coming up blank?

Going through the example maps like this one will give you a good idea of what is possible. Unfortunately, if you try most of the others by copying and pasting the HTML + JavaScript, you'll get nothing more than a blank page. What's the problem?

There is a minor problem in the way that google has its example maps currently set up. Luckily, it's an easy fix. The problem is in the line

<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">

which occurs right after at the beginning of the JavaScript + HTML code. This is a stylesheet which tells the browser how to display the page and, in particular, the map. But we don't actually have this file in that directory when we make an HTML file which means we won't have a stylesheet. Normally this would be okay, but the stylesheet is what tells the map how big it has to be — otherwise, it defaults to simply not showing up.

Here's the easy fix. Simply replace the part in quotes above with the line

"http://code.google.com//apis/maps/documentation/javascript/examples/default.css"

in any and all code you copy from google maps API. The entire line will read like this:

<link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css">

Map Markers.

Now that we've got that out of the way, let's create an HTML file called test3.html and paste the JavaScript + HTML code from the simple markers example into test3.html. Remeber that we need to replace the stylesheet lines in the last section.

Let's look through this before moving on, since there's some interesting stuff in here. I should note that, unlike Python, indenting doesn't matter in JavaScript.

All of the heading stuff (before the function initialize() part) is pretty standard HTML-type stuff and something to load up the google API stuff. Kind of dull. The function initialize() part looks pretty important, so let's look at that line-by-line. Note that you will most likely never need to write these from scratch so it is good enouch for now to just be able to analyze parts which have already been written to see what they do, and be able to edit them to fit our needs.

function initialize() {

This part is saying that we're making a function named initialize and it will take no parameters. We don't need to worry too much about what this is, but it's essentially something that will create all the stuff we want when we open the webpage.

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

This is very important. The var at the beginning of this tells us that we're creating a new variable — this is unlike Python, where we don't need to tell it something is a variable before defining it. This variable is called myLatlng and the type of variable that it is defined as is a google.maps.LatLng() variable. This is an important type of variable for Google Maps! The only way that google maps knows that some variable is a coordinate of Longitude and Latitude is if the variable is given as a google.maps.LatLng variable. We'll talk about this a bit later, but just note this is how we must input any point of latitude and longitude in if we'd like Google Maps to be able to understand it.

var mapOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

This is also defining a variable. The relevant variable is called mapOptions and it gives us some information about what the map will look like when we bring up the page. The zoom part tells us how zoomed in we will be, center is where the map is initially centered (note that, currently, it is centered at myLatlng which is the variable we just defined above!), and the mapTypeId just tells us the type of map we're looking at. Currently, it is set as a roadmap.

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

This is a slightly more mysterious variable, but it is necessary to create the actual map. It says, "I want this map, I want to call it map, and I want the map options to be mapOptions.

var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: 'Hello World!'
});

This variable is pretty neat. It's a marker (you will see a marker on google maps whenever it wants to point you at a particular location). We need to give three things to the marker variable: position, map, and title. For position, we need to give it a google.maps.LatLng() variable — here, they've used myLatlng again, but in theory we could give it any google.maps.LatLng() variable so long as we've defined it. For map, it just asks us which map to place it on. For now we'll only have one map per browser window so this is somewhat trivial: we need only to tell it that the map we're using is map, which we defined right before the marker. The last thing is the title which can be whatever string you'd like, or it can be blank by giving it the string ''.

The } at the end is just ending the function initialize. We don't need to worry about it too much here. The rest of the code just runs the initialize function and places the map inside of a map-canvas which it defines.

For now, just save the file and run it. If you get a blank screen, make sure that you've read the section right before this one and made the appropriate change to your code. If it runs okay, it should showAustralia with a marker on it. Cool.

Before going on to the next section, try to change the zoom parameter to another number besides 4. What happens? Also, how would we change the location of this marker? Think about this before going on to the next section.

Moving the Marker.

It's fun to have the marker in the same place as the center of the map, but it would be nice to be able to move it. You might think that we could just go into the marker variable and change the position: part to have some Longitude and Latitude right after it — remember, though, google maps requires each and every longitude and latitude coordinate to be a google.maps.LatLng() variable! So, suppose that we want our marker to be at (-25.0, 131.0). We'd have to create a new variable that details this. Let's do so. Right after var myLatlng is defined, make a new google.maps.LatLng variable, which we'll call newLatlng, with the coordinate we wanted. Both variables will look like this:

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var newLatlng = new google.maps.LatLng(-23.0,131.0);

Now that we've constructed our new variable, we can use it to place our marker. Go to the marker definition and change the position from myLatlng to our new variable. It will look like this:

var marker = new google.maps.Marker({
  position: newLatlng,
  map: map,
  title: 'Hello World!'
});

Save your code and open it. It should still center at Australia, but the marker should be moved over a little bit. If you want, you can mess around with the numbers in newLatlng and see where you can place the marker!

Multiple Markers.

Let's make a new file called test4.html and copy-paste the old code from simple markers example in again, recalling that you need to change that one stylesheet line to make it work. Save it and make sure that the map comes up when you open it.

You may have guessed by now how to make multiple markers: you define multiple google.maps.Latlng variables and then copy-paste the var marker part to create new marker objects. Let's go through this slowly to make sure we understand it completely.

First, in addition to the myLatlng variable that's already there, let's define two new google.maps.Latlng variables which we'll call place1 and place2. Let's define them as follows (note that your code will already have the myLatlng part in it):

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var place1 = new google.maps.LatLng(-23.0,131.0);
var place2 = new google.maps.LatLng(-27.0,132.0);

Next, we will copy-paste the marker definition, renaming the first marker1 and naming the second marker2 and giving them the positions place1, place2 respectively. We can also edit their labels if we'd like. It will look something like this:

  var marker1 = new google.maps.Marker({
      position: place1,
      map: map,
      title: 'First marker.'
  });

  var marker2 = new google.maps.Marker({
      position: place2,
      map: map,
      title: 'Second marker.'
  });

Saving and opening your HTML, you should see both points. If not, make sure your code looks something like mine.

In the next part...

What about more than two markers? It should be clear: simply make more variables. But what if we have something like one thousand markers? Should we just copy and paste a thousand times?

This is where we'll go back to our old friend Python.


⇐ Back to 4.1HomeOnwards to 4.3 ⇒