Introduction to Google Maps - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Introduction to Google Maps. Доклад-сообщение содержит 34 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1

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

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

Слайд 3

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

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

Слайд 5

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

Latitude and Longitude

Слайд 6

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

The sample code need to create a map with marker

Слайд 7

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

Google Maps in HTML

Слайд 8

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

Creating a Basic Google Map

Слайд 9

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

The Map Container The map needs an HTML element to hold the map: 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 tag:

Слайд 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.

Слайд 12

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

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

Слайд 14

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

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:

Слайд 16

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

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:

Слайд 18

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

Слайд 19

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

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).

Слайд 21

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

Слайд 22

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

Polygon Example

Слайд 23

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

Слайд 24

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

Google Maps – Circle Example

Слайд 25

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

Google Maps - InfoWindow Show in InfoWindow with some text content for a marker

Слайд 26

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

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.

Слайд 28

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

Full Example

Слайд 29

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

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:

Слайд 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:

Слайд 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)

Слайд 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: