Lecture 10 Introduction to Google Maps презентация

Lecture 10 Introduction to Google Maps Senior-Lecturer: Sarsenova Zh.N.

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

Google Maps API An API is a set of methods and tools that can be used for building software applications.

The Basic Skeleton of creating Google Map

Latitude and Longitude

The sample code need to create a map with marker

Google Maps in HTML

Creating a Basic Google Map

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

Different Map Types

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

Adding a Marker The Marker constructor creates a marker. And The position property must be set for the marker to display.

Animating the Marker (Example) The example below shows how to animate the marker with the animation property:

Icons instead of Marker We can specify an image (icon) to use of the default marker

Polyline A polyline is a line that is drawn through a series of coordinates in an ordered sequence. A polyline supports the following properties:

Example

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 Example

Google Maps – Circle Example

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

Google Maps Events

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.

Full Example

Pan Back to Marker Here, we save the zoom changes and pan the map back after 3 seconds:

Open an InfoWindow When clicking on the Marker Click on the marker to show an infowindow with some text:

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:

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)

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:

Good Luck!!!