Therefore, over a year ago I created an extensive tutorial to ease the process for the average website creator to add a nice Google Map to their own site. This post brought quite a bit of traffic to my blog and propelled my site to be the #1 search result on Google for the search term “Google map directions tutorial.”

I’m sure this new embed feature from Google will cut down on the number of people using my tutorial, but I’m still glad to see Google release this new feature. Who knows, I may have to write another tutorial detailing how to get the most out of the embed feature. You’ll just have to wait and see.

Some people may still require the Google Maps API, but I’m not sure why they would. They would have to be doing some really complex map stuff to not be able to accomplish the same feats with embed functionality.

Below I’ve included a map I quickly created to show of this new feature.

Before I forget, you can read more about this on Google Lat Long Blog.

If you like how the Calendar below looks and don’t mind managing the Calendar through Google, then the tutorial below is for you.

Before we can get started you will to sign up for a Google account if you don’t already have one. Once you have an account or if you already had one, you need to sign in or goto your Calendar.

Once you’ve signed into your Calendar, you must decide if you want to share your main calendar or create a second just for your website. I recommend creating a second one so you can keep personal events separate from events you want others to see. To create a second calendar, expand (if it isn’t already) the calendar list by clicking the arrow beside Calendar.

Once expanded, click the plus sign next to My Calendars (My shared Calendar has already been created, so that’s why you see “Your Shared Calendar” in the list of Calendars in the below screen shot).

You will need to fill in the details of your shared calendar. The main setting we’re concerned with here is to make sure “Share with Everyone” is set to “Share all information on this calendar with everyone”.

When prompted with “Are you sure you want to share this calendar with everyone?
Public calendars appear in Google Calendar searches.” select “Yes.”

Once you’ve hit the “Create Calendar” button, your shared calendar’s title should appear in the Calendars sidebar. The next step is to click on the little down arrow next to title of the calendar you want to share and select “Calendar Settings.”

This will take you back to the Calendar details page. On this page click on the “HTML” button in the Calendar Address section. When the dialog box appears, select the “Configuration Tool” Link.

The configuration of the Calendar is really up to you, but one thing to watch out for is the Calendar width. Make sure it will fit in the section of your site you would like to embed it in. 480 pixels wide is just right for my site. I happened to know my site’s content section is around 500 pixels wide. Several ways exist to find the width of the area you’d like to put the calendar in. Firefox has a cool plug-in called MeasureIt. You can also check your CSS file for the content div. Or you could just do trial an error. Your choice.

Once you’ve got all of the settings the way you like them, hit the “Update URL” button. All that’s left is copy and pasting the generated code into your website where you’d like the Calendar to appear. Easy as that!

I don’t imagine you’ll have any problems because I’ve attempted to make this tutorial very beginners friendly, but if you do feel free to ask questions in the comments below. You can also check out Google’s brief explanation of how to do what I explained above.

What I’ve explained is a fairly basic way to add a Google Calendar to your own site. This works great for many people who want to manage their Calendar via Google’s interface and simply display the events on a website. However, the method described above doesn’t allow you or any of your site visitors to manage the Calendar or interact with it in any way.

If you would like the ability to interact with the Calendar on your site in a way that is similar to actually logging into your Google Calendar, then you need to use the Google Calendar Data API. This requires quite a bit of programming knowledge and is beyond the scope of this tutorial. I recommend reading Google’s API documentation for help with this.

In response to a post on the Godbit forum, I created this brief Google Maps API tutorial. I believe every Church website, and every business for that matter, should provide a map and directions. The Google API lets us take that concept to a new level.
After completion of this tutorial you should be able to:

• Have your own interactive map (I guess that’s a given since that is what this tutorial is about)
Set the default zoom level
• Locate your geo coordinates
• Center your map on those coordinates
• Place a marker on those coordinates
• Have a custom pop-up with a form to get To Here and From Here Directions
• Know where to go to learn more

Want to see an example before we start?
You can also see this on a site I created at Vance Auto Sales.

Special Note: Google upgraded their API on April 3, 2006. I modified this code before writing this tutorial to use the new API, so all the new version 2 features should be available if you want to add some in. Also, Google does not provide any kind of routing features in the API. So when a user types in the address to get directions, a real Google Map opens in a new window with directions to or from our location.

Step 1-Sign up for a API Key
Before you can place a map on your own site you need to sign up for a Google API Key.

To sign up, you’ll need to provide the URL of the site that will be using the key. The easiest thing to do is provide the top-level directory that will use the key (rather than the absolute address of the page that will be using the map). Doing this ensures that you’re map will work on any page of your site. For example: I provided http://www.mandladventures.com/
Leave the page with the key in it open, so you can copy and paste the key in later steps. Remember, if you’re testing this on a localhost server, and then uploading it to a production server you’ll need two separate API keys.

Step 2-Locate Your Geo Coordinates
Google doesn’t provide a geocoding service at this time, so you’ll find that on your own.
Geocoder.us is what I used.
Simply enter the address you want to find the coordinates for, and write down the latitude and longitude geocoder.us provides.
Geocoder.us is only for United States addresses. If you live somewhere else, search for free geocoders.

Step 3-Create an XML file
This XML file will store all the points you want to mark on the map. This file also provides the text that will appear when the marker is selected. In our example, we only create one marker. If you want more than one marker on the map, add more instances of the of marker in the XML code below.

<markers>
  <marker lat="35.827818" lng="-86.072576" html="&lt;b&#47;&gt;First Baptist Church&lt;&#47;b&#47;&gt; &lt;br &#47;&gt; 405 West Main Street, &lt;br &#47;&gt; Woodbury, TN 37190" label="FBC"/>
</markers>

Change lat=”35.827818″ to your address’s latitude.
Change lng=”-86.072576″ to your address’s longitude.

Replace “First Baptist Church” with the title of your location.
Change 405 West Main Street, <br /> Woodbury, TN 37190 to your address.
Change the label=”FBC” to whatever you want.
Save the file as map.xml, and upload it to the same directory where your map page will be. You can change the directory, but you will have to change all the references to map.xml in step 7′s code to point to a your directory.

Remember: XML requires all HTML characters to be escaped.
For your convenience, I included a list of commonly escapeed characters below:

< = &lt;
> = &gt;
/ = &#47;
] = &#93;
[ = &#91;
" = &#34;
' = &#39;

Step 4-Call the API with your key
Insert the following code in the head section of your web page, placing your API key between key= and ”

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbTgUqmDVtw6KNosttYwutxR-kQiDMsqewHdPfI0JvuxAHQRqVhQsEF-filcfK_gQIlIUCIcFhtJH0Q" type="text/javascript"></script>

Step 5-Add an onunload event to the body tag

<body onunload="GUnload()">

Step 6-Place the div to contain the map

     <div id="map" style="width: 550px; height: 450px; border: 1px solid #000000;"></div>

	 <!--What to display if JavaScript is disabled in the user's browser-->
    <noscript><strong>JavaScript must be enabled in order for you to use Google Maps.</strong><br />
      However, it seems JavaScript is either disabled or not supported by your browser. <br />
      To view Google Maps, enable JavaScript by changing your browser options, and then
      try again.<br /><br />
    </noscript>

Insert this div, where you want to the map to appear.
Change the sytle to fit your needs.

Step 7-Insert the final bit of code
Insert this right before the /body and /html tags at the end of your web page that contains the map.

<script type="text/javascript">
    //<![CDATA[

	//the original code had a GMapSidebar to pick the markers from, I eliminated the GMapSidebar,
	//but deleting the code that referenced the bar corrupted the rest of the code
	//so just ignore references to GMapSidebar, unless you're really with JavaScript
    if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventually be placed in the GMapSidebar
      var GMapSidebar_html = "";

      // arrays to hold copies of the markers and html used by the GMapSidebar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      var htmls = [];
      var i = 0;
      // arrays to hold variants of the info window html with get direction forms open
      var to_htmls = [];
      var from_htmls = [];

      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);

        // The info window version with the "to here" form open (The Directions Form part.)
        to_htmls[i] = html + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" size=40 maxlength=40 name="saddr" id="saddr" value="" /><br>' +
           '<input value="Get Directions" TYPE="submit">' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() +
                  // "(" + name + ")" +
           '"/>';
        // The info window version with the "to here" form open
        from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
           '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
           '<input type="text" size=40 maxlength=40 name="daddr" id="daddr" value="" /><br>' +
           '<input value="Get Directions" type="SUBMIT">' +
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                  // "(" + name + ")" +
           '"/>';
        // The inactive version of the direction info
        html = html + '<br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>';

        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the GMapSidebar
        gmarkers[i] = marker;
        htmls[i] = html;
        // add a line to the GMapSidebar html
        GMapSidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;
        return marker;
      }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }

      // functions that open the directions forms
      function tohere(i) {
        gmarkers[i].openInfoWindowHtml(to_htmls[i]);
      }
      function fromhere(i) {
        gmarkers[i].openInfoWindowHtml(from_htmls[i]);
      }

//*******************************************************************
//Edit these options to CONFIGURE THE MAP
      // create the map
      var map = new GMap2(document.getElementById("map"));
	  //GLargeMapControl adds large zoom and pan controls on the left,
	  //you can change it by picking from two of the options described below
	  //there is a GSmallMapControl for a smaller pan/zoom control
	  //also there is GSmallZoomControl - a small zoom control (no panning controls)
      map.addControl(new GLargeMapControl());

	  //this adds the Map, Satellite, and Hybrid buttons, delete line if you don't want it
      map.addControl(new GMapTypeControl());

	  //this adds a scale to the bottom left of the map, delete line if you don't want it
	  map.addControl(new GScaleControl());

	  //type in the Geo Coordinates and default zoom level below. (Latitude, Longitude), Zoom level);
	  //these Coordinates set the center of the map, they do not place the marker.
	  //that is done in the map.xml file. If you want a marker to be centered, type
	  //the same coordinates here that are used for that marker in the map.xml file
	  //0 is zoomed all the way out.
      map.setCenter(new GLatLng(35.827818,-86.072576), 12);
//*******************************************************************

      // Read the data from map.xml
      var request = GXmlHttp.create();
      request.open("GET", "map.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");

          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
          }
          // put the assembled GMapSidebar_html contents into the GMapSidebar div
          document.getElementById("GMapSidebar").innerHTML = GMapSidebar_html;
        }
      }
      request.send(null);
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/
    // http://www.econym.demon.co.uk/googlemaps/
	//slight modifications by Matt from http://www.mandladventures.com/

    //]]>
    </script>

Step 8-Configure the map
Edit this section of the code above.

//*******************************************************************
//Edit these options to CONFIGURE THE MAP
      // create the map
      var map = new GMap2(document.getElementById("map"));
	  //GLargeMapControl adds large zoom and pan controls on the left,
	  //you can change it by picking to of the options described below
	  //there is a GSmallMapControl for a smaller pan/zoom control
	  //also there is GSmallZoomControl - a small zoom control (no panning controls)
      map.addControl(new GLargeMapControl());

	  //this adds the Map, Satellite, and Hybrid buttons, delete line if you don't want it
      map.addControl(new GMapTypeControl());

	  //this adds a scale to the bottom left of the map, delete line if you don't want it
	  map.addControl(new GScaleControl());

	  //type in the Geo Coordinates and default zoom level below. (Latitude, Longitude), Zoom level);
	  //these Coordinates set the center of the map, they do not place the marker.
	  //that is done in the map.xml file. If you want a marker to be centered, type
	  //the same coordinates here that are used for that marker in the map.xml file
	  //0 is zoomed all the way out.
      map.setCenter(new GLatLng(35.827818,-86.072576), 12);
//*******************************************************************

Set the default map center point, and the zoom level.
Change 35.827818 to your latitude
Change -86.072576 to your longitude.
Change 12 to your desired zoom level. 0 is zoomed all the way out.
To delete a control, remove the line of code.
You can change the types of controls used on the map.
For example, some controls can be smaller or bigger, which is useful if you have a small map. I included the alternative control names in the source code comments. For example change GLargeMapControl to GSmallMapControl.

Step 9-Tutorial Complete
Enjoy!

Download the Source Code used in this tutorial.

To learn more check out these resources:

• Google Maps API Version 2 Documentation
• Good set of Tutorials
• Google Maps API Group
• Google Mapki!

Big Thanks goes to:

• Mike Williams for writing the tutorials I based my code off of
• Google for releasing the API


]]> http://www.mandladventures.com/2006/05/04/google-maps-api/feed/ 58 http://www.mandladventures.com/2006/05/02/google-sketchup/ http://www.mandladventures.com/2006/05/02/google-sketchup/#comments Tue, 02 May 2006 13:41:40 +0000 Matt http://www.mandladventures.com/?p=38 Google is trying to take over the world, or at least Google Earth. Not only can you explore the whole world via satellite images, now you can build on it with Google’s new SketchUp. Sketchup is a 3D modeling tool…virtual LEGO for adults.

Google describes it this way

Google SketchUp (free) is an easy-to-learn 3D modeling program that enables you to explore the world in 3D. With just a few simple tools, you can create 3D models of houses, sheds, decks, home additions, woodworking projects – even space ships. And once you’ve built your models, you can place them in Google Earth, post them to the 3D Warehouse, or print hard copies.

I haven’t had much time to use the software, but initially I’ve been impressed. Most 3D modeling software is fairly complex, but SketchUp makes it surprisingly simple. After going through the 3 basic tutorials I was able to build a house with an attached deck; It actually looked decent.

Not all is fun and games, I’ve had trouble integrating it into Google Earth. That could be because I haven’t read the directions (typical guy).

SketchUp does have some advanced features. For example you can specify the date and time of the shadow cast on your model. The program comes with a variety of textures to apply to surfaces. The textures range from brick to grass.

If you’re a better designer than me, you can post your building on the 3D warehouse for the whole world to download. The 3D warehouse already has lots of world landmarks like the Whitehouse and the Golden Gate Bridge.

All of the free software Google has been releasing lately makes me wonder what they’re up to. They’ve got photo organizers, website creators, desktop search, chat (now built into Gmail), and the list keeps going. All this free stuff is great, but what is the alternative motive?

]]> http://www.mandladventures.com/2006/05/02/google-sketchup/feed/ 0