Integrating Google Maps API v3 Into Your Webpage

written by: jason
Integrating Google Maps API v3 Into Your Webpage

As of May 2010, Google depreciated the Google Maps Javascript API v2 and encouraged us to start using the new version 3 API. Version 2 will still work in case you are using it on your website, but upgrading to v3 is pretty straight forward and pretty easy. With v3, you no longer have to register with Google to receive an API key and this newer version also is designed to load quicker on mobile devises such as Android and iPhone.

So here’s how you add the map with a location marker. There are more options that you can add and you can find that info in the documentation on Google’s API website.

The first thing you will want to do is find the latitude/longitude of the place you want to focus in on. I use this website. Just type in the address and under the map you’ll find your numbers that you will need later on.

Next, you’ll add this piece of javascript provided by Google to your webpage (in the head section of your document). The sensor has to be set to either “true” or “false”. I believe that if you select true, the map will take up your entire webpage but I’m not 100% sure on that.

  1. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false"></script>

Now you need to make a section in your html to place the map. For an example, you can just wrap it in an empty

tag and give it an id of something like “map_canvas”.

example:

  1. <div id="map_canvas"><!-- google map goes here --></div>
<div id="map_canvas"><!-- google map goes here --></div>

Finally, some more javascript to actually load the map in the “map-canvas” container, add the latitude and longitude numbers that we found earlier, and this is also where we’ll place the code for the address marker.

Here it is. We’ll go over some aspects of the code next.

  1. <script type="text/javascript">
  2.  
  3.   function initialize() {
  4.    
  5. //replace 0's on next line with latitude and longitude numbers from earlier on in tutorial.
  6. var myLatlng = new google.maps.LatLng(00.0000, -00.0000);
  7.     var myOptions = {
  8.       zoom: 16,
  9.       center: myLatlng,
  10.       mapTypeId: google.maps.MapTypeId.ROADMAP
  11.     }
  12.    
  13. //here's where we call the marker.
  14. //getElementById must be the same as the id you gave for the container of the map
  15. var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  16.         var marker = new google.maps.Marker({
  17.       position: myLatlng,
  18.       title:"ADD TITLE OF YOUR MARKER HERE"
  19.   });
  20.        
  21.         var contentString = '<div id="content">'+
  22.     '<div id="siteNotice">'+
  23.     '<\/div>'+
  24.     '<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
  25.     '<div id="bodyContent">'+
  26.     '<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
  27.     '<\/div>'+
  28.     '<\/div>';
  29.  
  30. var infowindow = new google.maps.InfoWindow({
  31.     content: contentString
  32. });
  33.  
  34. google.maps.event.addListener(marker, 'click', function() {
  35.   infowindow.open(map,marker);
  36. });      
  37.  
  38.   // To add the marker to the map, call setMap();
  39.   marker.setMap(map);  
  40.   }
  41.  
  42.   function loadScript() {
  43.     var script = document.createElement("script");
  44.     script.type = "text/javascript";
  45.     script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  46.     document.body.appendChild(script);
  47.   }
  48.  
  49.   window.onload = loadScript;
  50. </script>
<script type="text/javascript">

  function initialize() {
    
//replace 0's on next line with latitude and longitude numbers from earlier on in tutorial. 
var myLatlng = new google.maps.LatLng(00.0000, -00.0000); 
    var myOptions = {
      zoom: 16,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    
//here's where we call the marker. 
//getElementById must be the same as the id you gave for the container of the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var marker = new google.maps.Marker({
      position: myLatlng,
      title:"ADD TITLE OF YOUR MARKER HERE"
  });
        
        var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '<\/div>'+
    '<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
    '<div id="bodyContent">'+
    '<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
    '<\/div>'+
    '<\/div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});      
  
  // To add the marker to the map, call setMap();
  marker.setMap(map);  
  }
  
  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
  }
  
  window.onload = loadScript;
</script>

If you’re not familiar with javascript (don’t worry, I’m not either) it looks quite daunting. After you go through it once or twice though, it really makes sense. To help, I either commented the important parts, or added some descriptive text in ALL CAPS.

The first little snippet is where you place your latitude and longitude numbers that we found earlier. You may or may not have a “-” in front of either of these numbers. It depends on the location.

The “zoom” var is how far in or out the map is zoomed on page load. You’ll have to experiment with these. Try using multiples of 4 (4,8,12,16 etc.).

The next bit of code is for the marker. First it calls a ‘click’ function so if you click on the red marker, a description pops up. The description codes follows and it consists of a H2 tag with an id and class of “firstHeading”. It’s then followed by a p tag that you can put any info about the location that you want. I think you can even add other things like img tags to place photos with your description.

Understanding Margin and Padding

written by: jason 1 Comment
Understanding Margin and Padding

Before I started designing for the web, I read a lot of blogs and tutorials on box modeling. Box modeling is basically the html way of laying out your design in a series of “divisions”, referred to as divs, or any other block-level elements (ex. h1-h6, paragraphs, block-quotes, unordered lists, ordered lists, etc.) and then controlling their precise location using your stylesheet (css). One way of fine tuning these elements is with margins and padding. This illustration shows the relationship between margin and padding to an element. In this case, a box:

margin and padding

Adding a Border

That was easy enough to comprehend. Now let’s dig a little deeper. What happens if you add a border? Let’s say you have a box with a width of 100px and margin left and right of 10px each. The total width is calculated by adding the width of the box (100px) + both right and left margins (10px+10px=20px). That would make a total width of 120px.

Now let’s add a 1px border around the entire box (graphic below). Guess what? You just increased the overall width of that box by 2px (1px on the left and 1px on the right).

margin with border

Same thing goes for padding. If you add padding back into the mix, you’ll have to remember to account for those values when determining your overall width (or height).

Where does this come into play?

The most common place to see this in action is in a sidebar. Here’s the scenario. You have a fixed width layout with you blog posts on the left and a sidebar on the right. You know your div wrapper is say 930px wide. Therefore, you calculate that you can have your blog posts be 600px wide and your sidebar 330px wide. So you go to your favorite browser load it up and lo and behold, your sidebar is floating down beneath your blog posts! WTF?! Nine out of ten times, you probably have either a stroke or margin on the left side of your sidebar or a stroke or margin on the right hand side of your main content which holds your blog posts. Subtract the total width of the stroke or margin from either the sidebar or content area and it should bounce right back up where it belongs. It’s an easy fix but can cause a major headache if you forget to account for that. ๐Ÿ™‚

Widgetizing a Sidebar in WordPress

written by: jason
Widgetizing a Sidebar in WordPress

How do you “widgetize” your WordPress sidebar? It’s actually pretty easy. But first, what is a widget? A widget is a little piece of code that creates a module that you can drag anywhere into your sidebar via the admin area of your WordPress install. A couple of examples might be a calendar or tag cloud. You can find the widget area under “Appearance” in the left hand column.
If you are using lists as your sidebar.php, i.e. category lists, page lists, blogroll etc, then you would have something that looks like this in your html.

  1. <ul id="sidebar">
  2.    <li id="categories">
  3.       <h2>HTML</h2>
  4.         <p>link goes here</p>
  5.    </li>
  6.    <li id="links">
  7.       <h2>Blogroll</h2>
  8.         <p>link goes here</p>
  9.         <p>link goes here</p>
  10.         <p>link goes here</p>
  11.    </li>
  12. </ul>
<ul id="sidebar">
   <li id="categories">
      <h2>HTML</h2>
        <p>link goes here</p>
   </li>
   <li id="links">
      <h2>Blogroll</h2>
        <p>link goes here</p>
        <p>link goes here</p>
        <p>link goes here</p>
   </li>
</ul>

It consists of two list items (categories and links) with titles (HTML and Blogroll) wrapped in h2 tags. Now, all we have to do is add three lines of code inside our unordered list and we’re all set (lines 2, 3 and 14 below).

  1. <ul id="sidebar">
  2. <?php if ( !function_exists('dynamic_sidebar')
  3.        || !dynamic_sidebar() ) : ?>
  4.    <li id="categories">
  5.       <h2>HTML</h2>
  6.         <p>link goes here</p>
  7.    </li>
  8.    <li id="links">
  9.       <h2>Blogroll</h2>
  10.         <p>link goes here</p>
  11.         <p>link goes here</p>
  12.         <p>link goes here</p>
  13.    </li>
  14. <?php endif; ?>
  15. </ul>
<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar() ) : ?>
   <li id="categories">
      <h2>HTML</h2>
        <p>link goes here</p>
   </li>
   <li id="links">
      <h2>Blogroll</h2>
        <p>link goes here</p>
        <p>link goes here</p>
        <p>link goes here</p>
   </li>
<?php endif; ?>
</ul>

Cool! That was simple. But not so fast. We aren’t quite finished yet. Open your functions.php file and make this small addition to it. Once you do that, you can visit the “widgets” section in your WordPress admin area and drag all the widgets that you want into your sidebar. ๐Ÿ™‚

  1. <?php
  2. if ( function_exists('register_sidebar') )
  3.     register_sidebar();
  4. ?>
<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>