Technologie‎ > ‎Google Maps‎ > ‎

Exercises

Presentation

Google Maps API - Vilnius




Exercise 1

Description
Create a website containing three maps, all centered at Vilnius (Terrain, satellite, roadmap). Adjust the zoom to show the city boundaries screen-wide.

Tips


Exercise 2 (optional)

Description
Publish your website in the internet, and make your application key secure, so it won't be possible to use the outside of your domain.
How to make it possible to test the website both on- and off-line?

Tips


Exercise 3

Description
  1. Create a map which contains couple of markers
  2. For a selected marker define an animation (BOUNCE), while choosing (DROP) for other markers.
  3. For selected markers define a custom icon loaded from a library
  4. (optional) Try to create custom, advanced icon for marker (shadows, handling z-index)
  5. (optional) Create couple of buttons in the website which surrounds the map. Show or hide markers depending on click on the buttons.

Tips
  • Maybe it's a good idea to take a look on data like this: http://gyva.lt/articles/view/249
  • Create google.maps.LatLng objects then assign them to google.maps.Marker objects
  • To enable animation, create an animation propertyin the Marker object.
  • To change the marker's object, simply define icon: 'plik.png' property
https://developers.google.com/maps/documentation/javascript/overlays?hl=pl#MarkerAnimations



Exercise 4

Description
Create an animation in which the center of the map will move around all markers created in a previous exercise.

Tips
  • Use google.maps.Map.panTo(LatLng)
  • These JavaScript functions might be useful: setTimeout() or setInterval()


Exercise 5

Description
  1. Create a map with one opened InfoWindow containing rich HTML content.
  2. Create a map with several markers. InfoWindows should popup when users clicks on the marker.

Tips
  • Consider using "Country links" data coming from the Ministry of Foreign Affairs
  • Use google.maps.InfoWindow
  • Add a listener to a marker to react on its events: google.maps.event.addListener(MARKER, EVENT, CALLBACK_FUNCTION)



Exercise 6

Description
  1. Create a website, where user will be able to enter city name and will be shown a map centered on chosen city. Provide an InfoWindow with the city name too.
  2. (optional) For bigger set of addresses (e.g. stored in a Spreadsheet) use a Geocoding service

Tips


Exercise 7

Description
  1. Create a map which responds to user's clicks. Create a marker in the point that was clicked.
  2. Add an InfoWindow to the created marker and provide the info about the nearest town.

Tips
  • Use the geocode method of google.mapsGeocoder class. Pass a latLng parameter.
  • To react on user's clicks, you need to add a listener to the map: google.maps.event.addListener(map, 'click', callback);
  • Callback function will be invoked with a parameter containing coordinates of the clicked point available in latLng property.
Documentation
https://developers.google.com/maps/documentation/javascript/geocoding?hl=pl#ReverseGeocoding


Exercise 8

Description
  1. Put various predefined symbols on the map. Experiment with color, stroke, transparency, etc.
  2. (optional) Define your own path and use it as a symbol.

Tips
  • You can find predefined symbols in the  google.maps.SymbolPath class


Exercise 9

Description
  1. Create a map which contains several Polylines. Differentiate them by using various style parameters.
  2. (optional) Create a map, where user is allowed to create a Polyline by clicking on random point on the map.

Tips
  • Use strokeColor, strokeOpacity, strokeWeight
  • Use Polyline getPath to get access to the array with the point of the Polyline


Exercise 10

Description
  1. Create a Polyline ended with an arrow.
  2. Create an arrow in every point clicked by the user. (The other end of the arrow may be always in the same point)
  3. (optional) Enable user to create arrows between two points.

Tips


Exercise 11

Description
  1. Create a dashed Polyline.
  2. (optional) Add animation to the Polyline.

Tips
  • Use strokeOpacity to hide the line. Add a non-transparent repeating symbol to create a pattern.
  • Use setTimeout() and offset to animate symbols.


Exercise 12

Description
  1. Create several Polygons in different colors.
  2. (optional) Create a Polygon which consists of more than one path and has non-trivial shape (e.g. a donut or non continuous shape)

Tips


Exercise 13

Description
  1. Create several circles on the map. Diameter of the circle should be related to some real data (e.g. city population)
  2. Create several rectangles with various colors.

Tips
  • Use google.maps.Circle and google.maps.Rectangle


Exercise 14

Description
  1. Modify the standard rendering of the map's control buttons. Hide some control elements and move the remaining to another place on the screen.
  2. (optional) Create your own control element on the map.

Tips
  • To hide a control element you need to pass a parameter to the mapOptions
  • To modify a default place of controls use position property of the ControlPosition class


Exercise 15

Description
  1. Create a custom-styled map. (e.g. change streets color)

Tips


Exercise 16

Description
  1. Based on external data, create a map with Heatmap layer.
  2. Change the default gradient of color

Tips

  • Depending on the zoom level, change Heatmap into markers.
Comments