Download presentation
Presentation is loading. Please wait.
1
ISC440: Web Programming 2 Web APIs Google Maps API
Dr. Abdullah Almutairi Spring 2016 © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
2
Web APIs API: Application Programming Interface.
Specifies how software components communicate with each other. Web API: specify how applications communicate with each other over the Web (HTTP, URI, XML, etc.) A web service allows for machine-to-machine communications over HTTP. A web API is a subset of web services that use REST methods. Web services might not perform all the operations that an API would perform.
3
Google Maps A web mapping service, free for non-commercial use that contains: Detailed global basemaps: streets, satellite imagery, and terrain. Useful services such as address and place locating. Ability to overlay a wide variety of map layers, (weather, traffic) from static or dynamic sources. Map layer creation and light customization through functionality through MyMaps. An API that allows for embedding and extensive customization.
4
Google Maps API The Google Maps JavaScript API does not require an API key to function correctly. However, it is strongly encourage you to load the Maps API using an APIs Console key which allows you to monitor your application's Maps API usage. Keys are freely available at: Key is referenced in a JavaScript include-file that must live on every page.
5
Google Maps API Example
<!DOCTYPE html> <html> <body> <div id="map"></div> <script type="text/javascript"> var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: , lng: }, zoom: 8}); } </script> <script async defer src=" </script> </body> </html>
6
Explaining the Example
In the script tag that loads the Maps API, it is possible to omit the async attribute and the callback parameter. This will cause the loading of the API to block until the API is downloaded, which will slow your page. There are two required options for every map: center and zoom. Center specifies the latitude and longitude co-ordinates of the center of the map. Zoom level 0 shows the whole planet. The JavaScript class that represents a map is the Map class. Objects of this class define a single map on a page. We create a new instance of this class using the JavaScript new operator. When creating a new instance of a Google map, we have to specify the html container it should be in, and the map options.
7
Google Maps w/ API Key
8
Google Maps w/ API Key
9
Google Maps MapOptions Object
The MapOptions object holds the map initialization variables/options.
10
MapOptions Properties
Property Type Description backgroundColor string Specifies a background color for the Map <div> center LatLng Required. Specifies the default map center disableDefaultUI boolean Enables/Disables all default controls mapTypeId MapTypeId The default map type zoom number Required. The default Map zoom level zoomControl The enabled/disabled state of the Zoom control mapTypeControl Specifies the default enabled/disabled state of the Map type control
11
Google Maps Map Types The following map types are available in the Google Maps API: MapTypeId.ROADMAP displays the default road map view. This is the default map type. MapTypeId.SATELLITE displays Google Earth satellite images. MapTypeId.HYBRID displays a mixture of normal and satellite views. MapTypeId.TERRAIN displays a physical map based on terrain information.
12
Google Maps Map Types mapTypeId: google.maps.MapTypeId.SATELLITE
mapTypeId: google.maps.MapTypeId.HYBRID mapTypeId: google.maps.MapTypeId.TERRAIN
13
Modifying the Map Type Methods of modifying the map type:
Setting the maps mapTypeId property, either within the constructor via setting its Map options object. By calling the map's setMapTypeId() method. The mapTypeID property defaults to MapTypeId.ROADMAP
14
Google Maps Controls The maps displayed through the Google Maps API contain UI elements to allow user interaction with the map. These elements are known as controls and you can include variations of these controls in your Google Maps API application. Alternatively, you can do nothing and let the Google Maps API handle all control behavior.
15
Google Maps Controls The Maps API comes with a set of built-in controls you can use in your maps: The Zoom control displays "+" and "-" buttons for changing the zoom level of the map. This control appears by default in the bottom right corner of the map. The Map Type control is available in a dropdown or horizontal button bar style, allowing the user to choose a map type (ROADMAP, SATELLITE, HYBRID, or TERRAIN). The Street View control contains a Pegman icon which can be dragged onto the map to enable Street View. The Rotate control provides a combination of tilt and rotate options for maps containing oblique imagery. The Scale control displays a map scale element. This control is disabled by default.
16
Google Maps Controls Methods of accessing the Google maps controls:
Modifying the map's MapOptions fields which affect the visibility and presentation of controls. Adjusting control presentation upon instantiating your map (with appropriate MapOptions). Modifying a map dynamically by calling setOptions() to change the map's options.
17
Google Maps - Overlays Overlays are objects on the map that are bound to latitude/longitude coordinates. Google Maps has several types of overlays: Marker - Single locations on a map. Markers can also display custom icon images. Polyline - Series of straight lines on a map. Polygon - Series of straight lines on a map, and the shape is "closed“. Circle and Rectangle. Info Windows - Displays content within a popup balloon on top of a map Custom overlays
18
Google Maps - Markers A marker identifies a location on a map.
By default, a marker uses a standard image. Markers can display custom images, in which case they are usually referred to as "icons." Markers and icons are objects of type Marker. You can set a custom icon within the marker's constructor, or by calling setIcon() on the marker.
19
Add A Marker The google.maps.Marker constructor takes a single Marker options object literal, specifying the initial properties of the marker. The following fields are particularly important and commonly set when constructing a marker: position (required) specifies a LatLng identifying the initial location of the marker. map (optional) specifies the Map on which to place the marker. If you do not specify the map on construction of the marker, the marker is created but is not attached to (or displayed on) the map. You may add the marker later by calling the marker's setMap() method.
20
Add A Marker Example function initMap()
{ var myLatLng = {lat: , lng: }; var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: myLatLng }); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello World!' }); } // To add the marker to the map, call setMap(); marker.setMap(map);
21
Add A Marker Example
22
Remove A Marker To remove a marker from the map, call the setMap() method passing null as the argument. marker.setMap(null); Note that the above method does not delete the marker. It simply removes the marker from the map. If you wish to manage a set of markers, you should create an array to hold the markers. Using this array, you can then call setMap() on each marker in the array in turn when you need to remove the markers.
23
Customize A Marker Image
If you want to display a single textual character on a marker, you can use a marker label. If you need greater customization, you can define an icon to show instead of the default marker image. Defining an icon involves setting a number of properties that determine the visual behavior of the marker.
24
Marker Label A marker label is a single textual character that appears inside a marker. You can specify a marker label as either a string or a MarkerLabel object that includes a string and other label properties. In both cases, only the first character of the specified string is displayed on the marker. When creating a marker, you can specify a label property in the MarkerOptions object. Alternatively, you can call setLabel() on the Marker object to set the label on an existing marker.
25
Marker Label Example
26
Marker Label Example
27
Marker Icons In the most basic case, an icon can simply indicate an image to use instead of the default Google Maps pushpin icon. To specify such an icon, set the marker's icon property to the URL of an image. The Google Maps API will size the icon automatically.
28
Marker Icons Example // This example adds a marker to indicate the position of Bondi Beach in Sydney, // Australia. function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: {lat: -33, lng: 151} }); var image = 'images/beachflag.png'; var beachMarker = new google.maps.Marker({ position: {lat: , lng: }, map: map, icon: image }); }
29
Marker Icons Example
30
Making Marker Draggable
To allow users to drag a marker to a different location on the map, set draggable to true in the marker options. draggable: true
31
Google Maps InfoWindow
An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The info window has a content area and a tapered stem. The tip of the stem is attached to a specified location on the map. Typically you will attach an info window to a marker, but you can also attach an info window to a specific latitude/longitude.
32
Add An InfoWindow The InfoWindow constructor takes an object literal, which specifies InfoWindowOptions the initial parameters for displaying the info window. The InfoWindowOptions object literal contains the following fields: content contains either a string of text or an HTML code to display in the InfoWindow. position contains the LatLng at which this info window is anchored. Note: An InfoWindow may be attached either to a Marker object (in which case its position is based on the marker's location) or on the map itself at a specified LatLng. maxWidth specifies the maximum width of the info window in pixels.
33
Add An InfoWindow If you wish to explicitly size the content, you can put it in a <div> element and style the <div> with CSS. You can use CSS to enable scrolling too. Note that if you do not enable scrolling and the content exceeds the space available in the info window, the content may spill out of the info window.
34
Open An InfoWindow When you create an info window, it is not displayed automatically on the map. To make the info window visible, you need to call the open() method on the InfoWindow, passing it the Map on which to open, and optionally, the Marker with which to anchor it. If no marker is provided, the info window will open at its position property.
35
InfoWindow Example
36
InfoWindow Example
37
InfoWindow Methods Close an InfoWindow: infowindow.close();
Move an InfoWindow: There are a couple of ways to change the location of an info window: Call setPosition() on the info window Attach the info window to a new marker using the InfoWindow.open() .
38
Geocoding Service Geocoding is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude and longitude ), which you can use to place markers or position the map. Reverse geocoding is the process of converting geographic coordinates into a human-readable address.
39
Geocoding Request You need to pass a function to execute upon completion of the geocoding request from the server. This function processes the result(s). You access the Google Maps API geocoding service within your code via the google.maps.Geocoder object. The Geocoder.geocode() method initiates a request to the geocoding service, passing it aGeocoderRequest object literal containing the input terms and a function to execute upon receipt of the response.
40
Geocoding Request The GeocoderRequest object literal contains the following fields: { address: string, location: LatLng, placeId: string, bounds: LatLngBounds, componentRestrictions: GeocoderComponentRestrictions, region: string }
41
Geocoding Request Required parameters:
address: The address which you want to geocode. location: The LatLng (or LatLngLiteral) for which you wish to obtain the closest, human-readable address. The geocoder performs a reverse geocode. placeId: The place ID of the place for which you wish to obtain the closest, human-readable address.
42
Geocoding Response The Geocoding service requires a function to execute upon retrieval of the geocoder's results. This function should pass two parameters to hold the results and a status code, in that order.
43
Geocoding Results The GeocoderResult object represents a single geocoding result. A geocode request may return multiple result objects:
44
Geocoding Results Results important fields:
types[] is an array indicating the type of the returned result. This array contains a set of zero or more tags identifying the type of feature returned in the result. For example, a geocode of "Chicago" returns "locality" which indicates that "Chicago" is a city, and also returns "political" which indicates it is a political entity. formatted_address is a string containing the human-readable address of this location. geometry contains: location contains the geocoded latitude,longitude value. Note that we return this location as aLatLng object
45
Geocoding Status Codes
The status code may return one of the following values: "OK" indicates that no errors occurred; the address was successfully parsed and at least one geocode was returned. "ZERO_RESULTS" indicates that the geocode was successful but returned no results. "OVER_QUERY_LIMIT" indicates that you are over your quota. "REQUEST_DENIED" indicates that your request was denied. INVALID_REQUEST" generally indicates that the query (address, components or latlng) is missing. "UNKNOWN_ERROR" indicates that the request could not be processed due to a server error. The request may succeed if you try again.
46
Geocoding Example var geocoder; var map; function initialize() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng( , ); var mapOptions = { zoom: 8, center: latlng } map = new google.maps.Map(document.getElementById("map"), mapOptions); } function codeAddress() { var address = document.getElementById("address").value; geocoder.geocode( { 'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } <body onload="initialize()"> <div id="map" style="width: 320px; height: 480px;"></div> <div> <input id="address" type="textbox" value="Sydney, NSW"> <input type="button" value="Encode" onclick="codeAddress()"> </div> </body>
47
Geocoding Example
Similar presentations
