Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering jQuery UI

You're reading from   Mastering jQuery UI Become an expert in creating real-world Rich Internet Applications using the varied components of jQuery UI

Arrow left icon
Product type Paperback
Published in Feb 2015
Publisher
ISBN-13 9781783286652
Length 312 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
Vijay Joshi Vijay Joshi
Author Profile Icon Vijay Joshi
Vijay Joshi
Arrow right icon
View More author details
Toc

Table of Contents (14) Chapters Close

Preface 1. Designing a Simple Quiz Application FREE CHAPTER 2. Building a Jigsaw Puzzle Game 3. Creating a Website Tour 4. Creating a Tabbed News Reader 5. Implementing CAPTCHA using Draggable and Droppable 6. Creating an Event Timeline Using a Slider 7. Using jQuery UI with Google Maps API 8. Creating a Photo Album Manager 9. Creating Widgets Using the Widget Factory 10. Building a Color Picker with Hex RGB Conversion 11. Creating a Fully Functional Dashboard A. Best Practices for Developing with jQuery UI Index

Displaying the map


This method simply creates the map and stores its reference in myMap.map. We will center it on New Delhi and set its zoom level to the value set in the spinner. The following code will define the options that we will pass to the map, and then call the maps API to display the map:

createMap : function()
{
  var mapOptions =
  {
    center: new google.maps.LatLng(28.637926, 77.223726),
    zoom: parseInt($('#spinner').val(), 10),
    disableDefaultUI : true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
  };
  this.map = new google.maps.Map($("#hotelsMap")[0], mapOptions);
  this.infowindow = new google.maps.InfoWindow();
}

We created an object named mapOptions, where we defined the default values for some properties. Here are the properties we defined:

  • center: The Google maps API's LatLng class is used to set the map's center at required coordinates. For this, we pass the latitude and longitude to the LatLng classes constructor. The coordinates provided...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image