SoF: July 2008

Use Google Maps API to embed Google Map in your website

In previous post, I introduced the basic usage of Google Maps that most people can do. In this tutorial, I'll show you how to use Google Maps API to embed Google Map in your website.... This tutorial is for advanced users who know Javascript and HTML programming.

Step 1 - Sign up for a Google Maps API key:

Go to http://code.google.com/apis/maps/ and Sign up for a Google Maps API key -> enter your web site URL in My web site URL, and check I have read and agree with the terms and conditions, then click Generate API Key.
For example: I'll sign up for a Google Maps API key for my website http://skyofflowers.googlepages.com.

The result:
Now, you can copy example code to make an example web page and see how Google Maps works.

Step 2 - Explore example code:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQ...
type="text/javascript"></script>

This Javascript contains API key "ABQ..." is required for page using Google Maps. Use the API key you've got at Step 1.

function load() {
if (GBrowserIsCompatible())  {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

This is main function to load a map.

var map = new GMap2(document.getElementById("map")); //create map object

map.setCenter(new GLatLng(37.4419, -122.1419), 13); //set the center view of map ~ where you want to display.

Method setCenter(...) has 2 arguments:

Latitude and Longtitude as a GLatLng object
Zoom level

In above example: latitude = 37.4419, longtitude = -122.1419, zoom level = 13

And maybe.... you want to know how to get latitude and longtitude of a place. Go to http://maps.google.com and search for one.

<body onload="load()" onunload="GUnload()">

This HTML script calls load() function defined above. It also has onunload event to prevent memory leaks

<div id="map" style="width: 500px; height: 300px"></div>

This HTML script makes a view to display map on web page. You can customize the width and height of the view.

Step 3 - Customize your map:

Based on the example code, you can modify it to suit your need.

1. Customize map type: use method setMapType(map_type). Standard map types:

G_NORMAL_MAP- the default view
G_SATELLITE_MAP - showing Google Earth satellite images
G_HYBRID_MAP - showing a mixture of normal and satellite views
G_DEFAULT_MAP_TYPES - an array of these three types, useful for iterative processing

For ex:

var map = new GMap2(document.getElementById("map_canvas"));
map.setMapType(

G_HYBRID_MAP); //showing a mixture of normal and satellite views

2. Show a welcome message like a floating balloon: use method openInfoWindow(...)

map.openInfoWindow(map.getCenter(), document.createTextNode("Hello, world"));

3. Add Large Map control:

map.addControl(new GLargeMapControl());

4. Add Small Map control:

map.addControl(new GSmallMapControl());

5. Add Zoom In & Zoom Out buttons:

map.addControl(new GSmallZoomControl());

6. Add Map Type control:

map.addControl(new GMapTypeControl());

7. Add a marker:

var options = {
title: "Welcome you!",
icon: G_DEFAULT_ICON
};
var marker = new GMarker(new GLatLng(37.4419, -122.1419), options);
map.addOverlay(marker);

8. Add a marker:

var marker = new GMarker(new GLatLng(37.4419, -122.1419));
GEvent.addListener(marker, "click", function() {
var html = '<div style="width: 210px; padding-right: 10px;"><a href="http://www.blogger.com/signup.html">Welcome you!<\/a><\/div>';
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
GEvent.trigger(marker, "click");

Here is a modified sample.

References:

5 steps to make a Blogger template by yourself

5 steps to make a Blogger template by yourself
blogger template, tutorial, web design

Part 1 - Overview

Step 1: Think to have an idea and outline blog appearance on paper with a pencil

This is the 1st step that most designers should do. It is not an exception for advanced bloggers who want their blogs to be unique. One of factors to make his/her blog unique is appearance/theme/skin of the blog. So, use a pencil to outline what you think and want your blog to be on a paper.

Step 2: Use graphics design tools to make your draft as image

You must know some graphics design tools, for ex: Photoshop...

Find images and use graphics design tools to make overview of your blog as image.

Step 3: Use web design tools to make your blog as HTML web page

You must know some web design tools, for ex: Dreamweaver, Fontpage... and HTML & CSS.

Prepare the images (slice a big image into pieces if required...). Use HTML and CSS to position and connect all parts of a page. You can use available templates to modify. FreeCSSTemplates has many templates ready for you.

Step 4: Make Blogger template

You must know XML and structure of a Blogger template. You can use existing Blogger template to modify.

Step 5: Apply new Blogger template to your blog

Part 2 - Structure of a Blogger template

Blogger template is an XML document. Root is <html> containing 2 parts:

<head>: blog title & skin data (Variable definitions & CSS)
<body>: blog content including blog header, blog posts, sidebar (contains widgets) and blog footer

data:blog.pageTitle: blog name, blog title
data:blog.homepageUrl: blog homepage Url
data:blog.url
data:description
data:homeMsg
data:newerPageUrl
data:newerPageTitle
data:widget.instanceId
data:olderPageUrl
data:olderPageTitle
data:post.backlinksLabel
data:post.numBacklinks
data:post.backlinks
data:backlink.url
data:backlink.title
data:backlink.snippet
data:post.authorLabel
data:backlink.author
data:post.timestampLabel
data:backlink.timestamp
data:post.createLinkUrl
data:post.createLinkLabel
data:post.id
data:post.title
data:post.link
data:post.url
data:post.body
data:top.showAuthor
data:top.authorLabel
data:post.author
data:top.showTimestamp
data:top.timestampLabel
data:post.timestampISO8601
data:post.timestamp
data:blog.pageType
data:post.allowComments
data:post.addCommentUrl
data:post.addCommentOnclick
data:post.numComments
data:top.commentLabel
data:top.commentLabelPlural
data:post.emailPostUrl
data:top.emailPostMsg
data:post.labels
data:postLabelsLabel
data:label.url
data:label.name
data:label.isLast
data:comment.adminClass
data:comment.deleteUrl
data:top.deleteCommentMsg
data:navMessage
data:feedLinks
data:posts
data:post.feedLinks
data:postCommentMsg
data:blogCommentMessage
data:post.commentFormIframeSrc
data:backlink.adminClass
data:backlink.deleteUrl
data:top.deleteBacklinkMsg
data:feedLinksMsg
data:links
data:f.url
data:f.mimeType
data:f.name
data:f.feedType
data:post.editUrl
data:post.adminClass
data:post.editUrl
data:top.editPostMsg
data:post.commentPagingRequired
data:post.oldLinkClass
data:post.oldestLinkUrl
data:post.oldestLinkText
data:post.olderLinkUrl
data:post.olderLinkText
data:post.newLinkClass
data:post.newerLinkUrl
data:post.newerLinkText
data:post.newestLinkUrl
data:post.newestLinkText
data:post.comments
data:comment.authorClass
data:comment.anchorName
data:comment.authorUrl
data:comment.author
data:commentPostedByMsg
data:comment.isDeleted
data:comment.body
data:comment.url
data:comment.timestamp
data:post.embedCommentForm
data:post.showBacklinks
data:posts
data:post.dateHeader
data:post.includeAd
data:adEnd
data:adCode
data:adStart
data:top.showStars
data:top.languageCode
data:top.blogspotReviews
data:title
data:content
data:link
data:height
data:sourceUrl
data:caption
data:style
data:data
data:i.url
data:i.name
data:i.post-count
data:intervalData
data:i.expclass
data:i.data
data:i.posts
data:interval.toggleId
data:interval.expclass
data:widget.actionUrl
data:interval.toggleId
data:toggleopen
data:blog.languageDirection
data:labels
data:label.name
data:label.url
data:label.count
data:links
data:link.target
data:link.name

To use data within HTML tag, add prefix "expr:" to HTML tag atttribute. For ex: <a expr:href='data:blog.homepageUrl' expr:title='data:blog.pageTitle'><data:blog.pageTitle/><a>

Part 3 - Using Blogger template

* Apply a blogger template:

After making or downloading a blogger template as XML file, open the file and copy file content to clipboard.
Go to Layout -> Edit HTML -> paste content to Edit Template text box.
Click Preview to see the preview of new template, or click Save Template to apply new template, or click Clear Edits to reverse old template.

* Backup/Restore template:

Go to Layout -> Edit HTML -> Backup/Restore Template -> click Download Full Template to backup your current template.
Go to Layout -> Edit HTML -> Backup/Restore Template -> Browse template file and click Upload to restore a template.

Part 4 - Tips

* To hide Blogger navigation bar, include this definition in CSS section:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

* Use Firebug (a plugin of Firefox) to explore the structure of any web page as well as blogger page and it will help you make CSS.

Embed Google Search Engine in your web page, blogs...

There are some ways to embed Google search engine into your web page, blogs...

1. Search only your site or whole world wide web

Customize where is bold and italic in this script, then embed into your web page:

skyofflowers.blogspot.com is your site address

<form action="http://www.google.com/custom">
<input name="q" size="20" type="text">
<input value="Search" type="submit"><br/>
<input name="sitesearch" value="skyofflowers.blogspot.com" checked="checked" type="radio"> Sky of Flowers
<input name="sitesearch" value="" type="radio"> Web</form>

The result:

2. Search only your site

Customize where is bold and italic in this script, then embed into your web page:

skyofflowers.blogspot.com is your site address

<form action="http://www.google.com/custom">
<input name="q" size="20" type="text">
<input value="Search" type="submit">
<input name="sitesearch" value="skyofflowers.blogspot.com" type="hidden">
</form>

The result:

3. Use Google Custom Search Engine

Go to Google Custom Search Engine
Sign in if you haven't
Click the button Create a Custom Search Engine
Enter search engine info & choose option: Search engine name, language, sites to search, edition...
Click Next when ready
The next page show the Preview of your custom search engine, click Finish. Now, you have a new custom search engine.

On My search engines page, click control panel link of which search engine you want to customize. There are some categories:

Basic: search engine info & preferences
Sites: included and excluded sites to search
Indexing: indexing status & sitemap
Look and feel: customize your search box, search results, Google-hosted search results
Code: choose your suitable search results hosting option, then copy and paste Search box code script to your web page, blogs...
Advanced: advanced options. You may try Google AJAX Search API
Preview: preview your search engine and get code to embed

The result:

4. Embed Blogger search

Customize where is bold and italic in this script, then embed into your Blogger blog:

skyofflowers is your blog name

<form action="http://skyofflowers.blogspot.com/search">
<input name="q" size="25" type="text"/>
<input value="Search" type="submit"/>
</form>

The result:

Embed Google Map in your web page, blogs...

Go to http://maps.google.com
Sign in if you haven't.
Go to My Maps -> click Create new map -> enter Map Title, Description and choose option (Public: anyone can find your map, Unlisted: only you know your map).

On edit map mode:

Search a place you want, Zoom In/Out and choose some map options (Traffic (show traffic) / More... (photos, Wikipedia) / Map (show street map) / Satellite (show labels) / Terrain (show street map with terrain)) for your best view.
For ex: If I want to find "Google Headquarter", I'll enter keyword "Google Headquarter" on search text box and click Search Maps. Google Maps will display some results on left sidebar. Click the result to view it on map.
If you want to mark a place that hasn't been marked yet. Click and put placemark on where to you want to mark -> Enter Title, Description for it -> click OK to accept info, or Cancel to cancel info, or Delete to delete this placemark.
After finding out or marking wanted place. Go to My Maps again and click Save to save the map.
To embed your map, click on the top-right map, it'll show a pop-up, Paste link in Email or IM, or Paste HTML to embed in website, or Customize and preview embed map.
Click Done to finish your map.