this document was produced by voloper creations inc. · site with one of our search engine...

© 2000-2008 Voloper Creations Inc. ii

Voloper Google API v2.0 User Guide

This document was produced by Voloper Creations Inc.

© 2000 – 2008 Voloper Creations Inc., All Rights Reserved

The information contained herein is the property of Voloper Creations Inc. Except as specifically authorized in writing by Voloper Creations Inc., the holder of this document shall: i) keep all information contained herein confidential, and ii) protect the information, in whole or in part, from disclosure and dissemination to all third parties except where otherwise authorized.

This document, as well as the software described in it, is furnished under license and may only be used or copied in accordance with the terms of such license. The information in this document is provided for informational purposes only, is subject to change without notice, and should not be construed as a commitment by Voloper Creations Inc.

Voloper Creations Inc., is an authorized supplier of products and services to the global WSI Internet Consulting and Education e-Marketplace.

kamamer

Text Box

© 2000-2008 Voloper Creations Inc. Voloper Google API v2.0 User Guideiii

Welcome to the Voloper Google API v2.0

Thank you for choosing Voloper Google API Tools!

The Voloper Google API tool is a comprehensive search solution that can easily be integrated within your Web project. This easy-to-use search tool uses the .NET platform and allows you, the Site Administrator, to provide your site visitors with an enhanced search experience while exploring your website.

The Google API tool uses AJAX technology, enhancing your Web pages’ interactivity, speed, and usability. The robust Administration back-end interface has a easily configurable set of menus that manages general settings as well as the module’s look and feel. This module features full integration with our OpenSites and Online Business Solution packages, allowing you provide a full-service web offering for your clients and site visitors.

The Google API enhances your website through the following search services:

Google Search Toolbar

Allows your users to search the Web and other Google services at the click of a buttonEasily configurable by site visitors through its built-in Settings Menu

Google Map Search

Allows your website visitors full access to the Google Maps service within your siteFully customizable - as a Site Administrator, you can add hotspots within the map to highlight one or more map locations

The Voloper Google API tool has been created to offer a fully configurable, feature-rich solution for your clients and site visitors. It has been designed to be intuitive and easy to use, even for the novice Web user.

Version 2.0 Features

Accessibility: Version 2.0 is Fully WCAG and WAI CompliantWe are concentrating our major efforts on Web Accessibility, to allow those with disabilities to effectively receive information from websites. Our Web Accessibility Initiative involves converting the Google Search and Map Search front-end interface to be fully compliant with priority Level 1 and 2 of W3C Web Accessibility1 Guidelines. Voloper Google API v2.0 has been fully rearchitected to ensure compliance with these guidelines. You can download our Accessibility White Paper from our Client Intranet or ask your Internet Consultant for a copy.

•

•

•

•

*Content and images you may add within Voloper Google API v2.0 may or may not be compliant to Web Content Accessibility Guidelines (WCAG) 2.0. To ensure compliance, please refer to Checklist of Checkpoints for WCAG 2.0 at http://www.w3.org/TR/WCAG20/. We will be glad to provide you assistance on any Web accessibility compliance and validation issues you may have. Please contact us for details and pricing information.

iv

Welcome to the Voloper Google API v2.0

Once you have configured the Voloper Google API module, let us help you promote your site with one of our Search Engine Optimization (SEO) and e-Marketer initiatives to optimize your site presence and productivity.

The success of your online business depends on a great product and a company that provides clear-cut solutions focused on catering to your needs. We promise to provide you both. Thank you for choosing us as your content management provider.

Voloper Google API v2.0 User Guide© 2000-2008 Voloper Creations Inc.

v

Voloper Google API v2.0: Table of Contents

Section One: The Voloper Google API Front-end Interface 1The Google Search Front-end Interface 1The Google Map Search Front-end Interface 2

Section Two: Configuring General Settings 3System Configuration Setup 3Registering for a Google AJAX Search API Key 3Registering for a Google Maps API Key 4Specifying a Google Maps Center Point 4

Section Three: Managing Google Map Settings 5Managing Google Map Settings 5Managing Map Hotspots 5Adding an New Hotspot 5Editing Hotspot Details 6Deleting A Hotspot 6

Section Four: Google API Integration 7Integrating the Google API Application 7

Talk to Us 9

Glossary 11

Index 13

Voloper Google API v2.0 User Guide© 2000-2008 Voloper Creations Inc.

© 2000-2008 Voloper Creations Inc. 1

The Voloper Google API Front-end Interface

The Google Search Front-end Interface

The Google Search Front-end Interface (Figure 1-1) is an application embedded within your Web project that allows site visitors to use the Google search engine right within your website.

Site visitors enter a search keyword in the Google Search field and click the Search button to get a list of results from the following Google services: Local, Web, Video, Blog, and News.

To view more results within a service, users click on the View More Results icon. Users click the All Results icon to display all search results.

To view the details of a search result, site visitors can click on the search result hyperlink to open the website in a new window.

Users can also configure the settings for each service by clicking on the Settings icon. Clicking clears all search results.

Figure 1-1: The Google Search Front-end Interface




The Voloper Google API Front-end Interface

Figure 1-2: The Google Maps Front-end Interface

The Google Map Search Front-end Interface

The Google Map Search Front-end Interface (Figure 1-1) is an application embedded within your Web project that allows site visitors to use the Google Maps search engine right within your website.

Site visitors enter a search keyword in the Google Search toolbar and click the Search button to get a list of results displayed within the map.

To display search result details, users can click on a Hotspot icon to display a search result bubble.

Users can click on the search result hyperlink within the bubble to view the associated website in a new window. Clicking the Directions link launches the Google Maps website in a new window, displaying directions from the map base address (set in the back-end Google Map Menu) to the search result location.

The Google Map is draggable - users simply use their mouse to pan left, right, up or down to see areas that are hidden off-screen.

As a Site Administrator, you can also specify hotspots within the map through the back-end Google Map Menu. Users simply click on a hotspot link listed in the Hotspot List to display the link location on the map.

© 2000-2008 Voloper Creations Inc. Voloper Google API v2.0 User Guide3

Figure 2-2: The Google Search API Page

Section Two: Configuring General Settings

System Configuration SetupThe Settings Menu (Figure 2-1) allows you to specify Google API Keys and specify a search center point for Google Maps. API Keys allow you to embed Google Search and Google Maps capabilities within your web project. You will need to create a Google account to use this service.

Registering for a Google AJAX Search API Key

After you have created your Google account, proceed with the following steps to sign up for a Google AJAX Search API Key.

Go to http://code.google.com/apis/ajaxsearch/ (Figure 2-1) and click the Sign up for a Google AJAX Search API key link. The Search API Signup Page will be displayed (Figure 2-2).

Check the box indicating you agree with the Google Search API’s Terms of Use.

Enter the your project’s Web address in the My Web Site URL field.

Click the Generate API Key button. The Search API Key Page (Figure 2-3) will be displayed.

Copy the auto-generated key and paste it in the Google Search API Key field in the Settings Menu (Figure 2-1).

1)

2)

3)

4)

5)

Figure 2-1: The Settings Menu

Figure 2-3: The Search API Signup Page

Figure 2-4: The Search API Key Page

4Voloper Google API v2.0 User Guide© 2002-2008 Voloper Creations Inc.

Registering for a Google Maps API Key

Proceed with the following steps to sign up for a Google Maps API Key.

Go to http://www.google.com/apis/maps/ (Figure 2-5) and click the Sign up for a Google Maps API Key link. The Maps API Signup Page will be displayed (Figure 2-6).

Check the box indicating you agree with the Google Maps API’s Terms of Use.

Enter the your project’s Web address in the My Web Site URL field.

Click the Generate API Key button. The Maps API Key Page (Figure 2-7) will be displayed.

Copy the auto-generated key and paste it in the Google Maps API Key field in the Settings Menu (Figure 2-1).

Specifying a Google Maps Center Point

After you have successfully registered for API Keys for your Web project and entered the key values in their respective fields within the Settings Menu, you can now specify a center point for the Google Maps web application.

Go to http://maps.google.com/ and type the address you would like to use as the center point of Google Maps in your Web project.

Copy the address exactly as displayed within Google Maps and paste it in the Center Point field in the Settings Menu (Figure 2-1).

Click the Submit button. The message Settings Updated will be displayed.

1)

2)

3)

4)

5)

1)

2)

3)

Section Two: Configuring General Settings

Figure 2-5: The Google Maps API Page

Figure 2-6: The Maps API Signup Page

Figure 2-7: The Maps API Key Page


Figure 3-1: The Google Maps Menu

Section Three: Managing Google Map Settings

Managing Google Map SettingsThe Google Map Menu (Figure 3-1) allows you customize the Google Map application within your Web project

Click the Google Map link in the right navigation pane within the Administration Panel. The Google Map Menu (Figure 3-1) will be displayed.

Enter a marker title name for the map in the Marker Title field. A marker is the main identifiable location within the map and is represented by the Marker icon .

Enter a title in the Map Title field.

Enter a title in the Hotspot Heading field. This header is displayed above the list of hotspots identified within the map. A hotspot is an identifiable location within the map and is represented by the Hotspot icon

Enter text in the Page Text field if you would like to add text content directly under the map.

Enter the address for the marker in the Base Address field. Go to http://maps.google.com/ to verify address validity.

Enter the Website address associated with the marker in the Website URL field.

Click the Submit button. The message Map Updated will be displayed.

1)

2)

3)

4)

5)

6)

7)

8)

Note: If you have configured your website to display in multiple languages in OpenSites, the Google Map Menu will display the Marker Title, Map Title, Hotspot Heading, and Page Text fields in each language. Click the Language Tab for each language to view and populate these fields in each language.

Managing Map HotspotsAfter you have configured Google Map settings and designated a main map marker, you can add hotspots within the map. A hotspot is an identifiable location within the map and is represented by the Hotspot icon

Adding an New Hotspot


Click the Add New Hotspot link. The Hotspot Details Page (Figure 3-2) will be displayed.

Enter the hotspot name in the Hotspot Text field.

Enter possible search keywords for the hotspot in the Search Keyword field. (This field is required).

Click the Submit button. The message Hotspot Added will be displayed.

1)

2)

3)

4)

5)

Figure 3-2: The Hotspot Details Page



Editing Hotspot Details


Find the Hotspot name in the Hotspot Text column and click its assigned Edit icon . The Hotspot Details Page will be displayed (Figure 3-2).

Edit the necessary fields, and click the Submit button. The message Hotspot Updated will be displayed.

Deleting A Hotspot


Find the Hotspot name in the Hotspot Text column and click the Delete icon assigned to it. The selected feed will automatically be deleted from the list.

1)

2)

3)

1)

2)

Figure 3-2: The Hotspot Details Page

Section Three: Managing Google Map Settings

Note: If you have configured your website to display in multiple languages in OpenSites, the Hotspot Details Page will display the Hotspot Text field in each language. Click the Language Tab for each language to view this field in each language.


Section Four: Google API Integration

The Google API module is fully modular and is easily integrated within your Web project in OpenSites.

Integrating the Google API ApplicationFrom the OpenSites Work Area, drag the Google API to the page you would like to host the Google API application (Figure 7-1). The Tool icon will appear within the Page icon.

Double-click the Page icon. The Page Details View will be displayed (Figure 7-2). Click the Contents tab.

Within the WCE window, position your cursor where you would like the Google API application to be placed.

Click the Insert/Edit Placeholder Icon. The Placeholder Properties dialog will be displayed.

Select Google API from the Placeholder Name dropdown list and click OK. The Google API placeholder will be displayed in the WCE window. You have now successfully added the Google API application to your Web project.

1)

2)

3)

4)

5)

Figure 7-1: The OpenSites Work Area

Figure 7-2: The Page Details View


Your feedback is important to us. Whether you'd like to share your opinion about a product, ask a question about one of our services, or comment on our website, we want to hear from you. Send your feedback and valuable suggestions to us. We look forward to hearing from you.

Voloper Google API v2.0: Talk to Us


Voloper Google API v2.0: Glossary

7 World Wide Web Consortium. About the World Wide Web Consortium.http://www.w3.org/Consortium/Overview.19998 World Wide Web Consortium. About WAI - Links to Documents. http://www.w3.org/WAI/about-links.html. 2008

BBCode BBCode (Bulletin Board Code) is the markup language used to format posts in many modern message boards.

CAPTCHACompletely Automated Public Turing test to tell Computers and Humans Apart)

Graphical User Interface (GUI)A computer interface that uses pictures and icons instead of text. Pronounced “gooey”.

HyperlinkHighlighted graphics or text in a Web page which jumps to a new page or location in the page when clicked. Hyperlinks can also be used to download files.

Navigation MenuA list of hyperlinks found at the top, bottom, or left of a Web page that allow users to view the major topic pages of a Web site.

Radio ButtonAn element in the user interface that allows a user to select an option. Each button represents a mutually exclusive selection.

RolloverA rollover occurs when the mouse pointer moves over a graphical element and displays a change in appearance.

RSSRSS (Really Simple Syndication or Rich Site Summary) is a format used to syndicate news and the content of news-like sites. RSS is most frequently used by major news sites, news-oriented community sites and personal weblogs.

SignatureA short message placed at the bottom of a post that identifies the sender and includes items such as phone number, fax number, address, information about the person’s occupation or company, and even a philosophical saying or humorous message

ThemePreset packages containing graphical appearance details, used to customise the look and feel of (typically) an operating system, widget set or window manager.URLUniform Resource Locator. A Web address, such as http://www.google.com.

World Wide Web Consortium (W3C)The World Wide Web Consortium (W3C) is an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards7.

Worldwide Accessibility Initiative (WAI)The Web Accessibility Initiative (WAI) works with organizations around the world to develop strategies, guidelines, and resources to help make the Web accessible to people with disabilities8.


Index

AAdding an New Hotspot 7AJAX Search API Key 5API Keys 5

CCenter Point fi eld 6

DDeleting A Hotspot 8Directions link 4

EEditing Hotspot Details 8

GGenerate API Key 6Google API Keys 5Google Map 7Google Map link 7Google Map Menu 4, 7Google Maps 5Google Maps API Key 6Google Maps search engine 4Google Maps website 4Google Search fi eld 3

HHotspot icon 4Hotspot List 4Hotspot Text fi eld 7

MManaging Google Map Settings 7Managing Map Hotspots 7map base address 4Map Search Front-end Interface 4My Web Site URL fi eld 6

RRadio Button 13Registering for a Google AJAX Search API Key 5Registering for a Google Maps API Key 6

SSearch API Key Page 5Search Front-end Interface 3Settings icon 3Settings Menu 5, 6Specifying a Google Maps Center Point 6

WWorldwide Accessibility Initiative 13