12
-
Google Maps API
Allows embedding of a Google map into one’s own web page using javascript.
Free to use, on any website that is provided free of charge to others.
Relatively gentle learning curve.
Highly customizable and easily transferrable.
Evolving - new functionality consistently being added.
What is Google Maps - summary
- 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.
Google Maps is widely used 📷 E.g. Glasgow Caledonian University
- Can Share or Embed Map :
- 📷 Share : can email URL or can add URL to web page
- 📷 Embed Map : Paste HTML to embed within website
Google Maps API
- w3schools has various examples
- Will look at some of these
- 🔗 http://www.w3schools.com/graphics/google_maps_intro.asp
<html> <head> //The Google Maps API is a JavaScript library. <script src="http://maps.googleapis.com/maps/api/js"> function initialize() { //Set Map Properties :Center, LatLng, Zoom, MapTypeID var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; //Create a new map inside the <div> element with id="googleMap", var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> //Create a <div> element to hold the map. Use CSS to size the element <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>X
Google map of Glasgow Caledonian University X
Google Map Share/Embed Option -
Map Properties
- The center property specifies where to center the map.
- Create a LatLng object to center the map on a specific point.
- Pass the coordinates in the order: latitude, longitude.
- The zoom property 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.
- The mapTypeId property specifies the map type to display. The following map types are supported:
- ROADMAP (normal, default 2D map)
- SATELLITE (photographic map)
- HYBRID (photographic map + roads and city names)
- TERRAIN (map with mountains, rivers, etc.)
latitude, longitude
- To obtain these values in Google maps :
- Right-Click on map and choose "What’s here"
- Values will appear – with additional information
📷 View Latitude and Longitude Example
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.
- 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
Google Maps Events
- 🔗 http://www.w3schools.com/graphics/google_maps_events.asp
- Click The Marker to Zoom
- Pan Back to Marker
- Open an InfoWindow When Clicking on The Marker
- Set Markers and Open InfoWindow for Each Marker
Google Maps Controls
🔗 http://www.w3schools.com/graphics/google_maps_controls.asp
- When showing a standard Google map, it comes with the default controls :
- Zoom - displays a slider or "+/-" buttons to control the zoom level of the map
- Pan - displays a pan control for panning the map
- MapType - lets the user toggle between map types (roadmap and satellite)
- Street View - displays a Pegman icon which can be dragged to the map to enable Street View
More Controls
- In addition to the default controls, Google Maps also has:
- Scale - displays a map scale element
- Rotate - displays a small circular icon which allows you to rotate maps
- Overview Map - displays a thumbnail overview map reflecting the current map viewport within a wider area
Refer to W3Schools for information about modifying these controls
X
Google Map showing Latitude and Longitude of Glasgow Caledonian University