7. Using jQuery UI with Google Maps API | Mastering jQuery UI

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Mastering jQuery UI

By : Vijay Joshi

Mastering jQuery UI

By: Vijay Joshi

Overview of this book

If you are a frontend developer with considerable knowledge of jQuery UI and want to take this expertise to the next level, then this book is for you.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Designing a Simple Quiz Application

1. Designing a Simple Quiz Application

Setting up jQuery UI

Creating the layout

Making the quiz functional

Improving the quiz

Summary

2. Building a Jigsaw Puzzle Game

2. Building a Jigsaw Puzzle Game

Getting ready

Creating the layout

Making the puzzle functional

Improving the puzzle

Summary

3. Creating a Website Tour

3. Creating a Website Tour

Getting ready

Designing the home page

Making the tour functional

Improving the tour

Summary

4. Creating a Tabbed News Reader

4. Creating a Tabbed News Reader

Creating the folder structure

Designing the page

Getting the code structure ready

Adding event handlers in the init method

Displaying posts of a subreddit

Getting comments for a post

Improving MyjqReddit

Summary

5. Implementing CAPTCHA using Draggable and Droppable

5. Implementing CAPTCHA using Draggable and Droppable

Creating the folder structure

Implementing the drag and drop CAPTCHA

Creating the slider CAPTCHA

Creating the number CAPTCHA

Summary

6. Creating an Event Timeline Using a Slider

6. Creating an Event Timeline Using a Slider

Creating the folder structure

Designing the page

Styling the content

Getting the code structure ready

Creating the timeline markup from data

Implementing the timeline functionality

Improving the timeline

Summary

7. Using jQuery UI with Google Maps API

7. Using jQuery UI with Google Maps API

Creating the folder structure

Designing the page

Displaying the map

Improving the functionality

Summary

8. Creating a Photo Album Manager

8. Creating a Photo Album Manager

Creating the folder structure

Designing the page

Creating the JSON file for albums

Getting code structure ready

Implementing the initialize method

Filling album names

Editing, deleting, and rearranging pictures

Improving album manager

Summary

9. Creating Widgets Using the Widget Factory

9. Creating Widgets Using the Widget Factory

The folder structure

Creating a widget to search data in a table

Improving the searchable widget

Creating a widget to display a slideshow

Improving the banner widget

Summary

10. Building a Color Picker with Hex RGB Conversion

10. Building a Color Picker with Hex RGB Conversion

Setting up the folder structure

Writing markup for the page

Styling the content

Implementing the color picker

Improving the Colorpicker

Summary

11. Creating a Fully Functional Dashboard

11. Creating a Fully Functional Dashboard

Setting up the stage

Designing the page

Getting the code structure ready

Initializing the portlets

Implementing sharing buttons

Displaying Flickr photos

Creating a weather widget

Displaying posts from the reddit front page

Creating an image display widget

Improving the portlets

Summary

A. Best Practices for Developing with jQuery UI

A. Best Practices for Developing with jQuery UI

General Guidelines

Using jQuery UI Themeroller to customize a theme

Index

Index

Creating the folder structure

Just as we did in previous chapters, let's begin by creating the folder structure. Create a new folder named Chapter7 inside the MasteringjQueryUI folder. Go inside this folder and create an HTML file called index.html for our HTML markup. Copy the js and css folders of jQuery UI inside the Chapter7 folder. Now go inside the js folder, create a new file, and name it myMap.js. This file will contain all of the code required for creating our maps mashup.

Getting a Google Maps API key

We will be using Google Maps JavaScript API v3 to display the maps. Google requires that you register your application and get an API key. Getting an API key is pretty easy. Visit https://developers.google.com/maps/documentation/javascript/tutorial#api_key from your browser to get detailed instructions on how to obtain an API key.

Once you are done setting up the folder structure and have an API key, move on to the next step – designing the page.

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Mastering jQuery UI

Search

Your notes and bookmarks