Slide GeoLocation N GoogleMaps PDF

STIJ6044MobileAndroidProgramming
GeoLocationwithGoogleMaps
GEOLOCATION & GOOGLE

MAPS V3
INTEL XDK APP DESIGNER GOOGLE MAP WIDGET
Drag
SessionA142(2015)
TRY THIS: SIMPLE GOOGLE MAPS
The Result
SessionA142(2015)
SessionA142(2015)
OBSERVE THE CODE
TRY THIS: DISPLAY ANOTHER LOCATION

After button click
SessionA142(2015)
TRY THIS: DISPLAY ANOTHER LOCATION
TRY THIS: DISPLAY INPUTS LOCATION
SessionA142(2015)
TRY THIS: DISPLAY INPUTS LOCATION
ZOOM & MARKER
SessionA142(2015)
ZOOM & MARKER
ADDITIONAL SLIDES
SessionA142(2015)
Google Maps V3 API
CSULA
Google Maps V3 API

the "map" itself.
The fundamental element in any Google Maps V3 API application
Learn fundamental google.maps.Map object

and the basics of map operations.
Jongwook Woo
CSULA
Computer
Information System
Hello World Example Google Maps
Declaring Your Application as HTML5

<!DOCTYPE html>
In order to avoid 0 x 0 pixels map size.

we include the following <style> declaration:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
map_canvas
the map container <div>
should take up 100% of the height of the HTML body.
specifically declare those percentages for <body> and <html> as
well.
Jongwook Woo
SessionA142(2015)
Computer
Information System
Loading the Google Maps API
CSULA
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=set_to_true_or_fals
e">
</script>
The http://maps.googleapis.com/maps/api/js
URL points to the location of Google Maps API
sensor parameter
to indicate whether this application uses a sensor to determine the user's
location
Cell or GPS
The <meta> tag

this map should be displayed full-screen
and should not be resizable by the user
Computer
Information System
Jongwook Woo
Map DOM Elements and Options
CSULA
Map DOM Elements

<div id="map_canvas" style="width: 100%; height: 100%"></div>
a spot for the map to display on a web page by creating a named div element
and obtaining a reference to this element in the browser's document object model (DOM).
<div> named "map_canvas" and the size is set to "100%" which will expand to fit
the size on mobile devices.
Map Options
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
To initialize a Map
We also set the initial zoom level
mapTypeId togoogle.maps.MapTypeId.ROADMAP
Jongwook Woo
SessionA142(2015)
ROADMAP displays the normal, default 2D tiles of Google Maps.

SATELLITE displays photographic tiles.
HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city
names).
TERRAIN displays physical relief tiles for displaying elevation and water features (mountains,
rivers, etc.).
Computer
Information System
CSULA
google.maps.Map - the Elementary Object
google.maps.Map(opts?)
Creates a new map using the passed optional parameters
var map = new

google.maps.Map(document.getElementById("map_canvas"),
myOptions);
the Map class
The JavaScript class that represents a map is
Objects of this class define a single map on a page.
You may create more than one instance of this class
each object will define a separate map on the page
Computer
Information System
Jongwook Woo
CSULA
Loading the Map
<body onload="initialize()">
To ensure that our map is placed on the page after
the page has fully loaded,
Doing so avoids unpredictable behavior
Latitudes and Longitudes

The google.maps.LatLng object
a way to refer to locations on the map.
passing its parameters in the order { latitude, longitude }:
var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)
Geocoding
the process of turning an address into a geographic point.
Jongwook Woo
SessionA142(2015)
Computer
Information System
10
Hello World Google Map
CSULA
Tutorial Code
http://code.google.com/apis/maps/documentation/javascript/tutorial.html
Example Page
http://code.google.com/apis/maps/documentation/javascript/examp
les/map-simple.html
Computer
Information System
Jongwook Woo
Map Events
CSULA
User events (such as "click" mouse events) are propagated

from the DOM to the Google Maps API.
These events are separate and distinct from standard DOM events.
using a property_changed convention

registering addListener() event handlers on
google.maps.event namespace
UI Events
A google.maps.Marker object can listen to the following user events
'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'
they are actually part of the Maps API

These events may look like standard DOM events, but
Jongwook Woo
SessionA142(2015)
Computer
Information System
11
CSULA
Map Events
an event handler to a marker

that zooms the map when clicked
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
});
Another event handler to the map for changes to the 'zoom' property
and move the map to Darwin, Northern Territory, Australia
on receipt of the zoom_changed event:
google.maps.event.addListener(map, 'zoom_changed', function() {
setTimeout(moveToDarwin, 3000);
});
http://code.google.com/apis/maps/documentation/javascript/events.htm
l
Computer
Information System
Jongwook Woo
CSULA
Map Controls
The Zoom control displays a slider (for large maps) or small "+/-"
buttons (for small maps)
control the zoom level of the map.
default in the top left corner of the map on non-touch devices
or in the bottom left corner on touch devices.
The Pan control

panning the map.
default in the top left corner of the map on non-touch devices.
allows you to rotate 45 imagery, if available.
The Street View control

Pegman icon which can be dragged onto the map to enable Street View.
default in the top left corner of the map.
The Rotate control

small circular icon which allows you to rotate maps containing oblique imagery.
default in the top left corner of the map.
Jongwook Woo
SessionA142(2015)
Computer
Information System
12
CSULA
Map Controls
The MapType control lets the user toggle between map types
(such as ROADMAPand SATELLITE).
default in the top right corner of the map.
The Overview Map control

displays a thumbnail overview map reflecting the current map viewport
within a wider area.
default in the bottom right corner of the map, and is by default shown in
its collapsed state.
The Scale control displays a map scale element.

non default.
Computer
Information System
Jongwook Woo
CSULA
Map Controls
modify the map's MapOptions fields

which affect the visibility and presentation of controls.
Or calling setOptions() to change the map's options.
For example, to disable the default UI entirely:

function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
}
var map = new
myOptions);
}
Jongwook Woo
SessionA142(2015)
Computer
Information System
13
CSULA
Map Controls
Disable some MapOptions fields

var myOptions = {
zoom: 4,
panControl: false,
zoomControl: false,
scaleControl: true,
}
var map = new
myOptions);
}
Computer
Information System
Jongwook Woo
CSULA
DirectionsService object
Disable some MapOptions fields

var myOptions = {
zoom: 4,
panControl: false,
zoomControl: false,
scaleControl: true,
}
var map = new
myOptions);
}
http://code.google.com/apis/maps/documentation/javascript/examples/ev
ent-simple.html
Jongwook Woo
SessionA142(2015)
Computer
Information System
14

Slide GeoLocation N GoogleMaps PDF

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Slide GeoLocation N GoogleMaps PDF

Uploaded by

Copyright:

Available Formats

STIJ6044MobileAndroidProgramming

GEOLOCATION & GOOGLE

INTEL XDK APP DESIGNER GOOGLE MAP WIDGET

TRY THIS: SIMPLE GOOGLE MAPS

TRY THIS: SIMPLE GOOGLE MAPS

TRY THIS: SIMPLE GOOGLE MAPS

TRY THIS: SIMPLE GOOGLE MAPS

OBSERVE THE CODE

TRY THIS: DISPLAY ANOTHER LOCATION

TRY THIS: DISPLAY ANOTHER LOCATION

TRY THIS: DISPLAY INPUTS LOCATION

TRY THIS: DISPLAY INPUTS LOCATION

ZOOM & MARKER

ZOOM & MARKER

Google Maps V3 API

Google Maps V3 API

Learn fundamental google.maps.Map object

Hello World Example Google Maps

Declaring Your Application as HTML5

In order to avoid 0 x 0 pixels map size.

Loading the Google Maps API

The <meta> tag

Map DOM Elements and Options

Map DOM Elements

ROADMAP displays the normal, default 2D tiles of Google Maps.

google.maps.Map - the Elementary Object

var map = new

Loading the Map

Latitudes and Longitudes

Hello World Google Map

User events (such as "click" mouse events) are propagated

using a property_changed convention

they are actually part of the Maps API

an event handler to a marker

The Pan control

The Street View control

The Rotate control

The Overview Map control

The Scale control displays a map scale element.

modify the map's MapOptions fields

For example, to disable the default UI entirely:

Disable some MapOptions fields

Disable some MapOptions fields

You might also like