Contrast & Google Maps

May 31, 2010
Episode 26
This week Nick explains visual contrast and Jim shows you how to embed a map in your pages using the Google Maps API.
Spotlight

Thanks to those who make Doctype possible!

Contrast

Contrast is one of the most overlooked concepts in visual design. Computer monitors don’t offer the subtle gradients and tones available in print work, so when designing a website you must be even more conscious of using enough contrast in your designs.

Introduction

When you’re creating websites, sometimes you want to draw attention to certain areas to highlight important details that the user should not miss. You can do this with various elements and principals of art and design like color, shape, texture, and line, but one of the most powerful ways of drawing a person’s attention is to create an area of high contrast.

Contrast can mean many different things, but in this case, I’m talking about differences in the brightness or value of a color. The greater the difference, the higher the contrast. Most computer monitors aren’t very good at delivering subtle changes in tone, so you’ll see high contrast used all over the web to guide peoples’ attention.

Color Schemes

Creating good contrast starts when you’re picking your color scheme. Picking good colors will build the foundation for a great design.

When I’m generating a color scheme using Photoshop and other various tools, I always try to take a second to desaturate the colors and look at them in black and white. Colors are a very pervasive aspect of any project, so it’s important to review your color scheme early on. Picking good colors in the beginning will save you a lot of headaches down the road.

When reviewing your color scheme for contrast, you’re looking for areas where there is not enough of a difference between two colors. In some cases, there may even be too much difference between two colors, and you may need to adjust your color tones to allow for softer gradations. Having areas of low contrast and areas of high contrast are important tools for when you’re building your design.

Low Contrast

High contrast is good for getting people’s attention, but that may not always be what you want. It’s important to have some areas of low contrast as well.

Using high contrast to draw the user’s attention isn’t very effective if the entire website is high contrast. It’s important to make sure you have areas of low contrast as well. Low contrast is a good tool to use when you need to include a piece of information that isn’t the most important thing on the page.

A good place to use low contrast is in the caption for an image. Often times you’ll notice that captions are in a smaller font, with a slightly grey color. This allows the site visitor to focus on the image, rather than the text.

Google Maps

The google maps API is the most popular way to display geographic information in web pages. It can be a little confusing to get started with, but once you have a firm grasp on how the basics of the Google Maps API, you can build some really awesome Maps in your page

Embedding

First we will be looking at how to get a simple google map into our page. We will be using Google’s most recent JavaScript Map API, version 3. If you have used version 2 of the API, you will notice some differences, most notably, you no longer need to register an API key for each domain you are deploying to.

The first thing we want to do is add the Google Maps script to the top of our page. We simply place a script tag with this url

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

We must pass one parameter, which is sensor, and the value must be true or false. This tells google maps if you want to determine the user’s location automatically.

Next, we must create a div that will become our map. It can be anywhere in the page, but it must have an explicit height and width applied via css. It does not have to be a fixed pixel value, it can be a percentage, but if no height and width are set at all, the map will take up no space.

<div id="mapDiv" style="width:500px;height:300px;">
  Map Will Go Here
</div>

Next we need to write the code to initialize the map. The code we write must be executed after the document loads. If you are using a JavaScript library, there are probably convenience functions you can use like jQuery’s document.ready, that will allow you to easily have code run after page load.

In our case, we will use the simple technique of creating an initialize function to hold our code, and using the body tag’s onload attribute to execute our function after the page loads.

<script>
  function initialize(){
    /...
  }
</script>
<!-- ... -->
<body onload="initialize()">

To create a map, we want to define 3 main properties: where the map is centered, what level of zoom to start with, and what style of map to use, like a roadmap, or satellite view.

We will create a javascript object called options to hold these three properties. For our center, we will create a LatLng object by calling new google.maps.LatLng() with the lattitude and longitude of our location.

We will pass this LatLng object to the center attribute of our options object. We set the zoom to a number 1 to 19, 19 being the most zoomed in.

Finally we set the map type by setting the options.mapTypeId to one of the google map type’s The possible values are in the google.maps.mapTypeId object and can be ROADMAP, SATELLITE, TERRAIN, or HYBRID.

function initialize(){
  var myCenter = new google.maps.LatLng(39.5, -88.21);
  var myOptions = {
    zoom: 3,
    center: myCenter,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);
}

Now we have our options, we can finally set up our map. We will create a map variable, and set it to a new google.maps.Map object. To the Map constructor we will pass our target map element, and our options. Once we do this we should now see an interactive map on our page centered on our desired location

Markers

The most common things maps are used for on webpages is to indicate the location of a specific business, or event. This is best done using the marker’s available int the Google Map’s API.

Adding a marker is actually pretty easy in google maps

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(28.542955,-81.378914),
    map: map,
    title:"A Pretty Cool Place"
});

We just need to create a new google.maps.Marker object. We pass to the constructor a javascript object with our marker details. We pass position, as a google.maps.LatLng object, this is where our pin will be centered. We then pass our map object to the map parameter. This tells google which map to place our marker on, finally we can give it a title, this will be displayed to the user if they hover there mouse over it.

Resources
Source Code
<!DOCTYPE html>
<html>
  <head>
    <title>Maps Demo</title>
    <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript" charset="utf-8"></script>
    <script>
      function initialize(){
        var myCenter = new google.maps.LatLng(39.5, -88.21);
        var myOptions = {
          zoom: 3,
          center: myCenter,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("mapDiv"), myOptions);



        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(28.542955,-81.378914),
            map: map,
            title: "Cool Place"
        });
      }
    </script>
  </head>
  <body onload="initialize();">
    <h1 id="maps_demo">Maps Demo</h1>
    <div id="mapDiv" style="width:500px;height:300px;">
      Map Will Go Here
    </div>
  </body>
</html>