🗊Презентация Introduction to Google Maps

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Introduction to Google Maps, слайд №1Introduction to Google Maps, слайд №2Introduction to Google Maps, слайд №3Introduction to Google Maps, слайд №4Introduction to Google Maps, слайд №5Introduction to Google Maps, слайд №6Introduction to Google Maps, слайд №7Introduction to Google Maps, слайд №8Introduction to Google Maps, слайд №9Introduction to Google Maps, слайд №10Introduction to Google Maps, слайд №11Introduction to Google Maps, слайд №12Introduction to Google Maps, слайд №13Introduction to Google Maps, слайд №14Introduction to Google Maps, слайд №15Introduction to Google Maps, слайд №16Introduction to Google Maps, слайд №17Introduction to Google Maps, слайд №18Introduction to Google Maps, слайд №19Introduction to Google Maps, слайд №20Introduction to Google Maps, слайд №21Introduction to Google Maps, слайд №22Introduction to Google Maps, слайд №23Introduction to Google Maps, слайд №24Introduction to Google Maps, слайд №25Introduction to Google Maps, слайд №26Introduction to Google Maps, слайд №27Introduction to Google Maps, слайд №28Introduction to Google Maps, слайд №29Introduction to Google Maps, слайд №30Introduction to Google Maps, слайд №31Introduction to Google Maps, слайд №32Introduction to Google Maps, слайд №33Introduction to Google Maps, слайд №34
Скачать
Вы можете ознакомиться и скачать презентацию на тему Introduction to Google Maps. Доклад-сообщение содержит 34 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Lecture 10 Introduction to Google Maps Senior-Lecturer: Sarsenova Zh.N.
Описание слайда:
Lecture 10 Introduction to Google Maps Senior-Lecturer: Sarsenova Zh.N.

Слайд 2


Introduction 1. Step: Create an HTML page 2. Step: Add a map with marker 3. Step: Get an API key https://developers.google.com/maps/documentation/javascript/examples/map-simple
Описание слайда:
Introduction 1. Step: Create an HTML page 2. Step: Add a map with marker 3. Step: Get an API key https://developers.google.com/maps/documentation/javascript/examples/map-simple

Слайд 3


Google Maps API An API is a set of methods and tools that can be used for building software applications.
Описание слайда:
Google Maps API An API is a set of methods and tools that can be used for building software applications.

Слайд 4


The Basic Skeleton of creating Google Map
Описание слайда:
The Basic Skeleton of creating Google Map

Слайд 5


Latitude and Longitude
Описание слайда:
Latitude and Longitude

Слайд 6


The sample code need to create a map with marker
Описание слайда:
The sample code need to create a map with marker

Слайд 7


Google Maps in HTML
Описание слайда:
Google Maps in HTML

Слайд 8


Creating a Basic Google Map
Описание слайда:
Creating a Basic Google Map

Слайд 9


The Map Container The map needs an HTML element to hold the map: <div id="map" style="width:100%;height:500px"></div> The map will automatically "inherit" its size from its container element.
Описание слайда:
The Map Container The map needs an HTML element to hold the map: <div id="map" style="width:100%;height:500px"></div> The map will automatically "inherit" its size from its container element.

Слайд 10


The Google Maps API The Google Maps API is a JavaScript library. It is added to the web page with a <script> tag: <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script The callback parameter specifies the function to be called (=myMap) when the API is ready.
Описание слайда:
The Google Maps API The Google Maps API is a JavaScript library. It is added to the web page with a <script> tag: <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script The callback parameter specifies the function to be called (=myMap) when the API is ready.

Слайд 11


The myMap Function - myMap function initializes and display the map: the Center- where to center the map LatLng object to center the map on a specific point. Pass the coordinates in the order: latitude, longitude. Zoom-specifies the zoom level for the map. Zoom:0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution. New google.maps.Map() creates a new Google Maps object.
Описание слайда:
The myMap Function - myMap function initializes and display the map: the Center- where to center the map LatLng object to center the map on a specific point. Pass the coordinates in the order: latitude, longitude. Zoom-specifies the zoom level for the map. Zoom:0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution. New google.maps.Map() creates a new Google Maps object.

Слайд 12


Different Map Types
Описание слайда:
Different Map Types

Слайд 13


Google Maps overlays Overlays are objects on the map that are bound to latitude/longitude coordinates. 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 Window – Displays content within a popup balloon on top of a map. Custom overlays
Описание слайда:
Google Maps overlays Overlays are objects on the map that are bound to latitude/longitude coordinates. 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 Window – Displays content within a popup balloon on top of a map. Custom overlays

Слайд 14


Adding a Marker The Marker constructor creates a marker. And The position property must be set for the marker to display.
Описание слайда:
Adding a Marker The Marker constructor creates a marker. And The position property must be set for the marker to display.

Слайд 15


Animating the Marker (Example) The example below shows how to animate the marker with the animation property:
Описание слайда:
Animating the Marker (Example) The example below shows how to animate the marker with the animation property:

Слайд 16


Icons instead of Marker We can specify an image (icon) to use of the default marker
Описание слайда:
Icons instead of Marker We can specify an image (icon) to use of the default marker

Слайд 17


Polyline A polyline is a line that is drawn through a series of coordinates in an ordered sequence. A polyline supports the following properties:
Описание слайда:
Polyline A polyline is a line that is drawn through a series of coordinates in an ordered sequence. A polyline supports the following properties:

Слайд 18


Introduction to Google Maps, слайд №18
Описание слайда:

Слайд 19


Example
Описание слайда:
Example

Слайд 20


Polygon A Polygon is similar to a Polyline in that it consists of a series of coordinates in an ordered sequence. However, polygons are designed to define regions within a closed loop. Polygons are made of straight lines, and the shape is “closed” (all the lines connect up).
Описание слайда:
Polygon A Polygon is similar to a Polyline in that it consists of a series of coordinates in an ordered sequence. However, polygons are designed to define regions within a closed loop. Polygons are made of straight lines, and the shape is “closed” (all the lines connect up).

Слайд 21


Introduction to Google Maps, слайд №21
Описание слайда:

Слайд 22


Polygon Example
Описание слайда:
Polygon Example

Слайд 23


Introduction to Google Maps, слайд №23
Описание слайда:

Слайд 24


Google Maps – Circle Example
Описание слайда:
Google Maps – Circle Example

Слайд 25


Google Maps - InfoWindow Show in InfoWindow with some text content for a marker
Описание слайда:
Google Maps - InfoWindow Show in InfoWindow with some text content for a marker

Слайд 26


Google Maps Events
Описание слайда:
Google Maps Events

Слайд 27


Click the Marker to Zoom We register for event notifications using the addListener() event handler. That method takes an object, an event to listen for, and a function to call when the specified event occurs.
Описание слайда:
Click the Marker to Zoom We register for event notifications using the addListener() event handler. That method takes an object, an event to listen for, and a function to call when the specified event occurs.

Слайд 28


Full Example
Описание слайда:
Full Example

Слайд 29


Pan Back to Marker Here, we save the zoom changes and pan the map back after 3 seconds:
Описание слайда:
Pan Back to Marker Here, we save the zoom changes and pan the map back after 3 seconds:

Слайд 30


Open an InfoWindow When clicking on the Marker Click on the marker to show an infowindow with some text:
Описание слайда:
Open an InfoWindow When clicking on the Marker Click on the marker to show an infowindow with some text:

Слайд 31


Set Markers and Open InfoWindow for Each Marker The placeMarker() function places a marker where the user has clicked, and shows an infowindow with the latitude and longitude of the marker:
Описание слайда:
Set Markers and Open InfoWindow for Each Marker The placeMarker() function places a marker where the user has clicked, and shows an infowindow with the latitude and longitude of the marker:

Слайд 32


Google Maps Types Google Maps API supports: ROADMAP (normal, default 2D map) SATELLITE (photographic map) HYBRID (photographic map + road and city names) TERRAIN (map with mountains, river, etc)
Описание слайда:
Google Maps Types Google Maps API supports: ROADMAP (normal, default 2D map) SATELLITE (photographic map) HYBRID (photographic map + road and city names) TERRAIN (map with mountains, river, etc)

Слайд 33


Types of Google Map The map type is specified either within the Map properties object, with the mapTypeId property: Or by calling the map’s setMapTypeId() method:
Описание слайда:
Types of Google Map The map type is specified either within the Map properties object, with the mapTypeId property: Or by calling the map’s setMapTypeId() method:

Слайд 34


Good Luck!!!
Описание слайда:
Good Luck!!!

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию