Virtual Touring in Google Maps with Play/Pause feature

Source code and sample html available at: https://github.com/prabgupt/googleMap_virtual_tour

Usage: Mentioned in README present at git repo above

Purpose of Plugin: You can display virtual tours between places on map. Currently, above sample show animation of marker moving along actual direction path between places located on map in sequence specified.

Prequisite

Summary about method’s inside custom googleMaps js

You’ll need to mainly use two method just like used in sample html.

  • showMapForDay– This method would render the map with places displayed as markers and routes connecting those places. It takes following arguments:

location 2D Array – It contains single locations in format [lat, lng] and routes in format [[lat1, lng2], [lat1, lng2]]. You can skip routes from this array if in your case, there will always be a route between two consecutive locations. Routes then, can be auto-generated inside this method after modifying its code a little bit.

zoom – zoom level which you want to set for your map

divId – This is div element Id inside which you want to show map. Google Maps libraries need this as an argument and hence passed here.

Description Array – This is array containing description about each location to be displayed in infoWindow when corresponding marker on map is clicked. This attribute allows HTML code inside it.

  • animateTrip – This method displays virtual tour between places in sequence as specified. It also supports play/pause feature. If this function is called when tour is running, it resumes tour while if it is called when no tour is running, it starts tour. Few of the arguments in this method are same as above method:

divId – This is div element Id inside which you want to show map. Google Maps libraries need this as an argument and hence passed here.

location 2D Array – It contains single locations in format [lat, lng]

Description Array – This is array containing description about each location to be displayed in infoWindow when place is reached while virtual tour. This attribute allows HTML code inside it.

callBack Function – This function specifies what to do when tours end. In case not provided, map will halt at last location with its infoWindow opened.

Main function which is actually responsible for enabling virtual tour animation

  • animate – We call this function periodically using ‘setTimeout’ Handler and each time this function is called, marker location is incremented by ‘step'(constant variable in js). In case current step is closer to the place we have located on map, marker is displayed for the location and corresponding infoWindow is opened by triggering ‘click’ action on the marker. Likewise, we keep proceeding until we reach ‘eol'(another variable in js) which signifies total path distance to be traveled on map and is calculated dynamically based on map’s locations.

 

Comments