Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google maps api 3


Published on

Published in: Technology, News & Politics

Google maps api 3

  1. 1. GOOGLE MAPS API 3 Subtitle
  2. 2. AGENDA • Introducing the Google Maps API • What’s new in version 3 • Creating Your First Map • Taking the Map Further with MapOptions • X Marks the Spot • Marker Icons • InfoWindow Tips and Tricks • Creating Polylines and Polygons • Dealing with Massive Numbers of Markers • Location, Location, Location
  3. 3. INTRODUCING THE GOOGLE MAPS API • How It Works • When seeing the dynamic nature of Google Maps, you might think there is something magical going on under the hood. But there’s really nothing magical about it. It’s just HTML, CSS, and JavaScript working together. The map tiles are images that are loaded in the background with Ajax calls and then inserted into a <div> in the HTML page. As you navigate the map, the API sends information about the new coordinates and zoom levels of the map in Ajax calls that return new images. And that’s it! No magic involved whatsoever. • The API itself basically consists of JavaScript files that contain classes with methods and properties that you can use to tell the map how to behave.
  4. 4. INTRODUCING THE GOOGLE MAPS API • Mapping Fundamentals • Coordinates • The coordinates are expressed using latitude and longitude. You can think of these as the y and x values in a grid. Latitude measures from south to north, and longitude measures from west to east. At the equator, the latitude is 0. This means that everything below the equator (the south hemisphere) has a negative number, and everything above it (the north hemisphere) has a positive number. Similarly, there’s a zero line for the longitude too. It’s called the prime meridian, and for historical reasons it runs through Greenwich, England. Every position that is located east of this line has a positive number, and everything west has a negative number.
  5. 5. WHAT’S NEW IN VERSION 3 • A New Namespace • Extensive Use of Object Literals • Asynchronous by Nature
  6. 6. WHAT’S NEW IN VERSION 3 • Creating a Map
  7. 7. WHAT’S NEW IN VERSION 3 • Markers • Marker Icons
  8. 8. WHAT’S NEW IN VERSION 3 • InfoWindows
  9. 9. WHAT’S NEW IN VERSION 3 • Polylines • Polygons
  10. 10. WHAT’S NEW IN VERSION 3 • Events • A New Method
  11. 11. CREATING YOUR FIRST MAP Laying the Foundation Inserting a Reference to the Google Maps API
  12. 12. CREATING YOUR FIRST MAP MapOptions MapOptions resides in an object that is passed to the map. It contains information about how you want your map to look and behave. Three properties that are required to make the map work: • center • Defines the center of the map with a coordinate. The coordinate must be of type google.maps.LatLng. • zoom • Defines the initial zoom level of the map. It must be a number between 1 and 23, where 1 is zoomed all the way out and 23 is zoomed all the way in. (The deepest zoom level can actually vary depending on the available map data.) • mapTypeId • Defines what type of map you initially want to display. All map types are found in the google.maps.MapTypeId object. To get a regular map, you need to set this to google.maps.MapTypeId.ROADMAP. If you instead wanted a satellite image, you would set it to google.maps.MapTypeId.SATELLITE.
  14. 14. CREATING YOUR FIRST MAP Creating Maps for Mobile Devices Better support for mobile devices was one of the main goals for Google Maps API v3. It is specifically adapted to work well on advanced mobile devices such as the iPhone and mobile phones using the Android OS. Creating maps for these devices is done the same way as for desktop browsers, but since they have smaller screens and have other ways of interacting with the items on the screen, such as the zoom-to-pinch gesture on the iPhone, there are some considerations that need to be made. Since the screens are smaller, you probably want the map to fill the entire screen. You do this by setting the height and width of the <div> containing the map to 100 percent. For the iPhone, there’s a special <meta> element that can be used for disabling the zoom-to-pinch behavior for the browser. The <meta> element must be positioned within the <head> section of the web page; it looks like this:
  15. 15. TAKING THE MAP FURTHER WITH MAPOPTIONS Controlling the User Interface • disableDefaultUI By setting this property to true, you will disable the default user interface. This means the default zoom control and the map type chooser will not be displayed.
  16. 16. TAKING THE MAP FURTHER WITH MAPOPTIONS mapTypeControl With this property, you control whether the mapTypeControl will be displayed. You use it to choose what map type to show. Set it to true to display it and to false to hide it. The default value is true. style This property determines the appearance of the control. The values you can choose from reside in the google.maps.MapTypeControlStyle object. • DEFAULT: The DEFAULT value will vary the look of the mapTypeControl depending on the size of the window and possibly other factors. As of the time of writing, this means that the horizontal bar will be displayed if the map is big enough; otherwise, the drop-down will be used. • HORIZONTAL_BAR: This option will display the standard bar. • DROPDOWN_MENU: This option will display the control as a drop-down list. It’s great when the map is small or you want it to use up as little space as possible for some other reason.
  18. 18. TAKING THE MAP FURTHER WITH MAPOPTIONS mapTypeIds The map type control displays the different map types available for the user. You can control which map types will appear with the help of the property mapTypeIds. It takes an array containing the different MapType controls you want to use.
  19. 19. TAKING THE MAP FURTHER WITH MAPOPTIONS navigationControl This property displays or hides the navigation control. That is the control that typically resides in the upper-left part of the map with which you can zoom and sometimes pan the map navigationControlOptions With the navigationControlOptions property, you determine the look of the navigation control. It works very much the same as the mapTypeControlOptions property in that it takes an object as its value.
  20. 20. TAKING THE MAP FURTHER WITH MAPOPTIONS style The style of the navgationControl comes in four flavors that all reside in the google.maps.NavigationControlStyle class: • DEFAULT: If set to this value, the control will vary according the map size and other factors. As of now, that means it will display either the small or large control, but that might change in future releases. • SMALL: This is the small control. It only enables you to zoom the map. • ANDROID: This control is specially tailored for Android smart phones. It • differs not only in look from the other controls but also in position since its default position is at the bottom center of the map. ZOOM_PAN: This is the large control that lets you to both zoom and pan the map.
  21. 21. TAKING THE MAP FURTHER WITH MAPOPTIONS scaleControl This property determines whether the scale control will be displayed. Set it to true to display the control and false to hide it. This control is not displayed by default, so if you want it to show, you have to explicitly set this property to true. keyboardShortcuts This property enables or disables the ability to use the keyboard to navigate the map. The keyboard shortcuts that are available are the arrow keys for panning and +/- for zooming. Set this property to true for the keyboard shortcuts to be active or false to disable them. The default value is true.
  22. 22. TAKING THE MAP FURTHER WITH MAPOPTIONS disableDoubleClickZoom Normally when you double-click in a map, it zooms in. To disable this behavior, set the disableDoubleClickZoom property to true, The default value of this property is false. draggable The default behavior is that you can pan the map by dragging it. If you for some reason would like to disable it, you’ll have to set the draggable property to false, The default value of this property is true. scrollwheel Normally you can use the scroll wheel of the mouse to zoom in and out of the map. If you want to disable this, you’ll have to set the scrollwheel property to false, The default value of this property is true.
  23. 23. TAKING THE MAP FURTHER WITH MAPOPTIONS streetViewControl This property shows or hides the Street View control, popularly called the pegman. The default value of this property is false, which means that Street View is not available. If you set it to true, the map will display an orange pegman right above the zoom control Drag the pegman to the desired street to enter Street View mode Once you drop the pegman on a valid street, you will enter Street View mode To go back to the map, you have to click the X in the upper-right corner of the view. Note Not all places have street view available. To see what regions that are covered, check out
  24. 24. TAKING THE MAP FURTHER WITH MAPOPTIONS Controlling the Map Container noClear Normally when the map loads, it automatically clears the map container (<div>) of any content, before inserting the map into it. If for some reason you want to override that behavior, you’ll find this property useful. If you set noClear to false, it will preserve the content of the map container when adding the map to it. The default value of noClear is false. backgroundColor This property also affects the map container. It sets the color of the container’s background. This is typically visible when you pan the map and before the map tiles have been loaded. Either you can use a hexadecimal value code for setting the color or you can use the standard keywords for color in HTML and CSS like red, blue, and yellow.
  25. 25. TAKING THE MAP FURTHER WITH MAPOPTIONS Controlling the Map Container Controlling the Cursor To use an image, you provide the draggableCursor property with a URL instead of a keyword. Using an image called myCursor.png that resides in a folder on the server called img would will in the following:
  26. 26. TAKING THE MAP FURTHER WITH MAPOPTIONS Controlling the Map Settings with Methods setOptions This is a method of the map object, and it takes a MapOptions object as its sole attribute. To use it, you create an object literal, just as you did when you were creating a map, and you pass it to this method. So, to change the zoom level of the map, you could do this: Getting and Setting the Zoom Level Changing the Center of the Map It’s important to be able to center the map on a certain point. you can both get it and set it: • getCenter(): Returns a number indicating the current zoom level of the map • setCenter(latlng:LatLng): Sets the center of the map using a LatLng. Getting and Setting the mapType • getMapTypeId(): Returns a string indicating the current mapTypeId • setMapTypeId(mapTypeId:MapTypeId): Sets the mapTypeId using one of the values in google.maps.MapTypeId
  27. 27. X MARKS THE SPOT A marker is basically a small image that is positioned at a specific place on a map. A Simple Marker Adding a Tooltip Changing the Icon
  28. 28. X MARKS THE SPOT Adding an InfoWindow A Simple InfoWindow Adding a Click Event to the Marker
  29. 29. X MARKS THE SPOT Adding U.S. Cities to the Map
  30. 30. X MARKS THE SPOT Automatically Adjusting the Viewport to Fit All Markers You’re dealing with dynamic data and don’t know exactly where the markers are going to be positioned. You could, of course, have the map zoomed out so far out that you’re certain that all the marker will fit, but a better solution is to have the map automatically adjust to the markers added. There’s when the LatLngBounds object will come in handy. Introducing the LatLngBounds Object
  31. 31. MARKER ICONS Changing the Marker Icon Adding a Custom Icon to a Marker Adding a Shadow Putting It Together
  32. 32. MARKER ICONS Changing the Marker Icon Setting the Anchor Point The anchor property takes a Point as its value. A Point is defined with an x and y value, which represents a two-dimensional plane. These values are in pixels. Adjusting the Shadow
  33. 33. MARKER ICONS Defining a Clickable Area Depending on which one you choose, the coord property works a bit differently. • Rectangles (rect) Rectangles are defined with the string value 'rect'. If you choose this one, you’ll need to provide the coord property with two points, which marks the top-left and bottom-right corners of the rectangle. • Circlular (circ) Circles are defined with the value 'circ'. Choosing this shape requires the coord property to have three values: x, y, and r where x and y marks the center of the circle and r defines its radius. • Polygons (poly) Polygons are defined with the value 'poly' and consist of several points connected with lines, just like one of those connect-the-dots figures from a child’s painting book. If you choose this shape, you’ll have to provide the coord property with a series of x and y values that define each dot.・You can use as many as you like, and since polygons are a closed figure, the last point you define will be connected with the first.
  34. 34. MARKER ICONS Defining a Clickable Area
  35. 35. MARKER ICONS Sprite Support Origin takes a google.maps.Point as its value, and it defines where the starting point of the hole in the sprite that will be displayed is located. Did that make sense to you? Well, consider this example. If you have one image per marker icon, you probably want to set origin to 0,0, since that is the topleft corner of the image. But if you have a sprite, and want to display a green Wi-Fi icon, which is the one in the middle, you want to set it to something else. First you need to define the size of the image. This defines a box. Then you need to define where to position that box inside the sprite, which is done with origin. In this case, it’s 34 pixels from the left edge of the image and 0 pixels from the top
  36. 36. MARKER ICONS Where to Find Icons google-maps-icons : Google Maps: Colored Markers: Mapito Map Marker Icons: Changing the Marker Icon According to Mouse Events Normal state Hover State Click State
  37. 37. MARKER ICONS Adding the Events Hover Click
  38. 38. MARKER ICONS Creating a Custom Marker Icon Google Map Custom Marker Maker Google Maps Icon Shadowmaker mapicon Factory
  39. 39. INFOWINDOW TIPS AND TRICKS Adding Rich Content to the InfoWindow Styling the Content
  40. 40. INFOWINDOW TIPS AND TRICKS Inserting a Video Using HTML5
  41. 41. INFOWINDOW TIPS AND TRICKS Inserting a Video Using HTML5
  42. 42. INFOWINDOW TIPS AND TRICKS Creating a Detail Map That’s it! You now have a map with a detail map inside an InfoWindow. To recap, you’re just done the following: 1. Added a click event to the marker on the map 2. Created a detail map by first creating a <div> and then putting a map in it 3. Added a nonclickable marker in the detail map’s center 4. Created or reused an InfoWindow and added the detail map to it
  43. 43. INFOWINDOW TIPS AND TRICKS Creating a Zoom-In Link
  44. 44. CREATING POLYLINES AND POLYGONS Creating a Simple Polyline
  46. 46. CREATING POLYLINES AND POLYGONS Creating Polygons Creating a Simple Polygon
  47. 47. CREATING POLYLINES AND POLYGONS Creating Donuts Polygons that contain other polygons are often called donuts. The name comes from the idea that a donut has a hole in it, and that’s exactly what a donut polygon has.
  48. 48. CREATING POLYLINES AND POLYGONS Creating a Polygon with a Highlight Effect create a polygon that features a highlight effect when the user moves the mouse over it.
  49. 49. DEALING WITH MASSIVE NUMBERS OF MARKERS Too Many Markers? Reducing the Number of Markers Being Displayed One obvious way of to get around this problem is to not display all the markers all the time. Before getting into how to code actual solutions to this problem. Filtering Another way of reducing the number of markers displayed on the map is by offering a filtering function. STF (which is a Swedish Tourist Association with more than 400 hostels, mountain stations, and alpine huts) offers a map where you can find all of their accommodations as well as other things to see and do.
  50. 50. DEALING WITH MASSIVE NUMBERS OF MARKERS Too Many Markers? Don’t Always Use Markers Clustering A common solution for handling the lots-of-markersproblem is to cluster them. What this means is that instead of displaying each individual marker at each time, clusters of markers are displayed. When you zoom in on a cluster, it will break up into smaller clusters or in individual markers. Grid-Based Clustering Grid-based clustering is probably the most common approach for clustering markers. It will divide the map into a grid and group all markers within each square into a cluster. Although an efficient technique, it has some obvious limitations since it can lead to unwanted results.
  51. 51. DEALING WITH MASSIVE NUMBERS OF MARKERS Clustering • Distance-Based Clustering • This technique looks at each individual marker and checks whether it’s nearby other markers. If it’s close enough to another marker, the two of them will be grouped into a cluster. Distance-based clustering also has its drawbacks. Since the clusters will appear at random locations depending on where a cluster is formed they may not make sense for the user. • Regional Clustering • A third technique is regional clustering. What this means is that you define different geographical regions, such as counties or states. All markers in each region will be grouped into a cluster. You also define at which zoom level the cluster will break up into separate markers (or smaller clusters). The advantage of this technique is that you can create clusters that make more sense to the user. The drawback is that it requires more effort and can’t as easily be automated as the other clustering techniques.
  52. 52. DEALING WITH MASSIVE NUMBERS OF MARKERS Some Practical Examples We will write some code that will auto generate markers at random locations.
  53. 53. DEALING WITH MASSIVE NUMBERS OF MARKERS Third-Party Libraries MarkerClusterer As the name implies, this library is used for clustering markers. It uses a grid-based clustering method, which makes it ideal for a fast solution to the many-markers problem. This library is available at its file repository at
  54. 54. DEALING WITH MASSIVE NUMBERS OF MARKERS Third-Party Libraries Applying MarkerClusterer Reconstructing the Loop Markers are automatically grouped in clusters and being added to the map
  55. 55. DEALING WITH MASSIVE NUMBERS OF MARKERS Third-Party Libraries Tweaking the Clustering with Options MarkerClusterer has four properties: • gridSize • The MarkerClusterer object divides the map into a grid. All markers within a grid are grouped into a cluster. With this property you can change the size of the grid. It takes a number representing the size in pixels as its value. The default value is 60. • maxZoom • This property determines the maximum zoom level at which a marker can be part of a cluster. It takes a number as its value, and if you don’t explicitly set it, it will default to the maximum zoom level of the map. • zoomOnClick • You can control whether clicking a cluster will zoom the map in or not by using this property. It takes a Boolean as its value, and the default value is true. • styles • With this property, you can apply different styles to the clusters. It takes an array of MarkerStyleOptions objects as its value. The objects in the array should be ordered by cluster size. So, the first object should be the one styling the smallest cluster, and the last object should be the one styling the largest cluster. To learn more about how to set this, check out the reference documentation in the file repository.
  56. 56. DEALING WITH MASSIVE NUMBERS OF MARKERS Third-Party Libraries MarkerManager Its primary job is to reduce the number of markers on the map by only rendering the ones that are inside the current viewport. This way, the browser isn’t bogged down with markers that wouldn’t be visible anyway. When the user pans or zooms the map, the MarkerManager library will recalculate which markers to render and adds those that are now inside the viewport and removes those that are outside. The file repository for MarkerManager is found at
  57. 57. DEALING WITH MASSIVE NUMBERS OF MARKERS Third-Party Libraries MarkerManager Creating the Markers Adding the Markers to the MarkerManager
  58. 58. DEALING WITH MASSIVE NUMBERS OF MARKERS Third-Party Libraries Regional Clustering with MarkerManager You now have a map that appears to have regional clustering. When you load it, only the two cluster markers will be visible. As you zoom in, the cluster markers will disappear, and the city markers will become visible
  59. 59. DEALING WITH MASSIVE NUMBERS OF MARKERS Third-Party Libraries Regional Clustering with MarkerManager
  60. 60. DEALING WITH MASSIVE NUMBERS OF MARKERS Adding Clickable Clusters Clicking one of the clusters will zoom the map in and reveal the city clusters.
  61. 61. DEALING WITH MASSIVE NUMBERS OF MARKERS Tweaking the MarkerManager with Options, options tweak the way the MarkerManager object works : • • • maxZoom • This property takes a number as its value and sets the maximum zoom-level at which a marker can be part of a cluster. When you use the addMarkers() method to add markers and don’t pass along a value for the maxZoom attribute, it will use this value instead. The default value is the map’s maximum zoom level. borderPadding • The MarkerManager object just renders the markers that are inside the current viewport, but it has a buffer zone just outside the viewport where markers also will appear. The reason for this is that when you pan the map shorter distances, you will get a better user experience since the nearest markers are already loaded. By default, this buffer zone is set to 100 pixels, but you can set it to something different using this property. As you probably already guessed, this property takes a number as its value. trackMarkers • If you change the position of markers after you’ve added them to the MarkerManager object, you should set this property to true. If you don’t, the MarkerManager object will not keep track of your markers, and if you move one, it will appear at two places simultaneously. Setting this option to true provides poorer performance, so you might not want to use it if you’re sure you’re not going to change the positions of the markers. The default value of trackMarkers is false.
  62. 62. LOCATION, LOCATION, LOCATION Geocoding When you send in an address, you get the coordinates for that address back. It’s that simple! This is very handy in circumstances where you only have an address, but you still somehow want to automatically plot it on a map. Restrictions : The Geocoding service if freely available, but it does have some limitations, since it’s a fairly processor-intensive request. It’s currently limited to 2,500 geocode requests every 24 hours from a single IP address. That’s not an insignificant amount of requests, so in most cases, this will more than suffice. It’s not the end of the world if you exceed that limit once or twice, but repeated abuse can result in a permanent ban.
  63. 63. LOCATION, LOCATION, LOCATION Building an Address Lookup Web Page Adding the HTML
  64. 64. LOCATION, LOCATION, LOCATION Setting Up the Event Handler Building an Address Lookup Web Page The Starting JavaScript Looking Up an Addres
  65. 65. LOCATION, LOCATION, LOCATION Taking Care of the Response You can use the status code to see how the request went. It will basically tell you whether the request was successful. All the statuses are of the type google.maps.GeocoderStatus. One status is, for example, OK, and it will look like this: google.maps.GeocoderStatus.OK. Here’s a list of all the possible status codes: • OK • This code indicates that everything went all right and that a result is returned. • ZERO_RESULTS • If you get this status code, the request went all right but didn’t return any results. Maybe the address you looked for doesn’t exist. • OVER_QUERY_LIMIT • This status indicates that you’ve used up your quota. Remember that there’s a limit of 2,500 requests a day. • REQUEST_DENIED • This indicates exactly what it says. The request was denied for some reason. The most common reason for this is that the sensor parameter is missing. • INVALID_REQUEST • This status indicates that something was wrong with your request. Maybe you didn’t define an address (or latLng).
  66. 66. LOCATION, LOCATION, LOCATION Interpreting the Result Therefore, the results come as an array. This array contains a number of fields: • types This is an array that contains what type of location the returned result is. It could, for example, be a country or a locality, which indicates that it’s a city or town. • formatted_address This is a string that contains the address in a readable format. If you, for example, search for Boston, this will return “Boston, MA, USA.”As you can see, it actually contains several facts about the address. In this case, it’s the name of the city, the name of the state, and the name of the country. • address_components This is an array containing the different facts about the location. Each of the parts listed in formatted_address is an object in this array with a long_name a short_name and the types. • geometry This field is an object with several properties. The most interesting one is location, which contains the position of the address as a LatLng object. It also has other properties such as viewport, bounds, and location_type.
  67. 67. LOCATION, LOCATION, LOCATION Adding an InfoWindow
  68. 68. LOCATION, LOCATION, LOCATION Reverse Geocoding Reverse geocoding is the exact opposite of geocoding. Instead of looking up a position from an address, you look up an address from a position. Building a Reverse Geocoding Map
  69. 69. LOCATION, LOCATION, LOCATION Reverse Geocoding Creating the getAddress() Function
  70. 70. LOCATION, LOCATION, LOCATION Reverse Geocoding
  71. 71. LOCATION, LOCATION, LOCATION Finding the Location of the User IP-Based Geocoding One way of finding the l ocation of the user is through IP-based geocoding. So far in the book, you’ve been loading the Google Maps API by simply referring to it in a <script> element. There is another way of loading it, and that’s through google.load, which is part of the Google AJAX API. If you use it to load the Maps API, you get the additional benefit of the location of the user. To use the Google AJAX API, you need to load it into the page using a <script> element and then utilize its google.load() method to load additional APIs. You include the Google AJAX API like this in the <head> section of the web page: Once the Google AJAX API is loaded, its load() method is available, and you can use to load additional APIs from your JavaScript code. Here’s how to load v3 of the Google Maps API: The parameters passed are the name of the API (maps), the version of the API (3), and an option object containing additional settings. In this case, you want to add the sensor parameter to the query string of the URL to the API, and this is done with the other_params property.
  72. 72. LOCATION, LOCATION, LOCATION Getting the Position The interesting part of using google.load is that you now have access to an approximate location of the user. This information is found in google.loader.ClientLocation. Note that the location determined from IP is not very accurate, so the greatest level of detail is the metro level, which is a city or a town. Sometimes the location is not even available at all, so you need to take this into account when building your map by providing a fallback. The ClientLocation object has several properties that are of interest: • latitude • Returns a number representing the latitude for the location • longitude • Returns a number representing the longitude for the location • • Returns the name of the city associated with the location • • Returns the name of the country associated with the location • address.country_code • Specifies the ISO 3166-1 country code associated with the location, for example US for the United States, JP for Japan, and SE for Sweden • address.region • Returns the country-specific region name associated with the location
  73. 73. LOCATION, LOCATION, LOCATION Creating a Location-Aware Map Creating the HTML
  74. 74. LOCATION, LOCATION, LOCATION Creating a Location-Aware Map Creating the JavaScript Code
  75. 75. LOCATION, LOCATION, LOCATION Creating a Location-Aware Map Having done that, you have all the information you need to create the map and add a marker and an InfoWindow to it. You will use the latLng for both the map and the marker. My location is determined to be Stockholm, Swe den If the map is unable to determine the location, the default location is being used as a fallback.
  76. 76. LOCATION, LOCATION, LOCATION Getting Better Accuracy As you noticed with IP-based geolocation, it’s not very accurate and can actually be completely wrong about the user’s whereabouts, as the case was for me. Fortunately, better options for getting the location of the user are starting to emerge. Several browsers are already supporting the Geolocation API, which is an emerging W3C standard for finding the location of a device. Right now, Firefox 3.5+, Chrome 5.0+, iPhone 3.0+, and Android 2.0+ support this standard. This means that you can use it to get a more accurate position. Different Levels of Accuracy There are several levels of accuracy when trying to determine the user’s location. You’ve already looked at the l east accurate one, IP-based. Mobil e devices such as the iPhone and Android phones have a few other methods. The first and fastest one is to calculate the position by triangulating the relative distance to different cellular towers. This method, depending on the number of nearby cell towers, gives you accuracy from a few hundred meter s to a kilometer . The second and most accurate method is by using GPS. It takes a bit longer to find the location but can provide an accuracy of a few meters. Privacy Concerns A browser will always ask for your permission to use your location. Exactly how it’s implemented is different in different browsers.
  77. 77. LOCATION, LOCATION, LOCATION Building a More Accurate Map Creating the HTML You will need to add three JavaScript libraries to the web page in order for this to work, The first one is the Google Maps API. You will go back to adding it with a <script> element. The second one is a script called gears_init.js. It will initialize Google Gears if it’s installed. The third script is geo.js, which contains the unified API that you’re going to use. The Starting JavaScript
  78. 78. LOCATION, LOCATION, LOCATION Building a More Accurate Map Now, the next step is to try to determine the location of the user. All the methods of geo.js reside in the geo_position_js object. First you need to initialize the geo_position_js object.
  79. 79. LOCATION, LOCATION, LOCATION Building a More Accurate Map If you allow the browser to share your location, your script will try to grab your current location and then put a marker and an InfoWindow there. Note that it can take a while for the API to get your location, so be patient. Firefox will ask whether you want to share your location. The map puts a marker at your current location.
  80. 80. THANKS Prepared By: Muhammad Alaa