A Google Maps implementation

This Google map implementation started when I was asked for a map of the University of Crete for its new website. I did not have access to the ESRI ArcGIS Online at the time, which would have made the whole task much easier, so I took a look at the Google Maps Javascript API and decided to give it a go. I am far from being a software developer and it was literally the first time I was trying to do something in javascript, however I think I managed to pull it off. I bet the code is not polished and a lot of optimization can be done, however the functionalities are neat since it combines the quality of Google Maps very fine resolution and 3d visualization with the Google Street spherical panoramas. Some of these Google Street panoramas were shot by me. There is the possibility to enhance the experience by shooting high quality panoramas and uploading them to Google Street (Pano2VR support it and the procedure is quite easy and user friendly). Another way is to offer the ability to open custom Virtual Tours by opening the closest panorama from where the user clicked by checking the distance as described in “Checking distances in a Pano2VR virtual tour“

The new University of Crete (UOC) campus Google map implementation can be found in the following link: https://tours.nhmc.uoc.gr/maps/uoc/

Following the UOC map, I started a new Google Map for the city of Heraklion to play around with some ideas for presenting spatial related info like historical monuments, sightseeing sites etc and cooperating with the Google Street panos and a virtual tour. At the same time I experimented with a slider representing time, with which I was able to filter chronologically the monuments. This show the location of the monuments at a specific year from 1204 and on. This slider has steps as well that are points in time (years) when significant and related to the city of Heraklion historical events have occured. This map can be found in this link: https://www.panotours.gr/googlemaps/heraklion/ and is also embedded at the top of this post.

Both of there maps are actually php sites with the spatial data stored in a mysql / mariadb database and the javascript Google Maps API used for plotting the data and add the functionalities. To edit the data QGIS software with a connection to the MariaDB database is used.

The QGIS project that is used to edit the MariaDB data. The basemap of the image is the OpenStreet map. The marker data are dynamically exported as geo json with the use of php.

The functionalities of Heraklion map (the UOC map has some of them) are:

1. Plotting points of interest with custom icons on a Google Map basemap.
2. Clicking anywhere on the Google Maps basemap will open the closest Google Street view photo sphere. The same logic applies if someone clicks on a point of interest.
3. Filtering the points by selecting a type and search for a specific one by using a second select filter field.
4. Plotting routes on the Google Maps basemap.
5. There are several photo galleries and a virtual tour embedded as iframes.
6. There is a point in time slider that begins from 1204 and ends up in the current year that filter the points of interest (markers) chronologically.
7. It is bilingual (greek and english).

The Points of interest

The points of interest are stored in MariaDB table with a geopoint field storing the spatial information and several fields used to store the descriptive and other information of the place. There is a `start` and `end` field which store the year that the place was built and the year which it was destroyed respectively and are used for the point in time slider to filter them. The data from the mariadb database is converted via the use of mysqli php library to xml markers that are fed to the javascript. The output xml can be found at the following address:

http://www.panotours.gr/googlemaps/heraklion/map-layer1.php

The markers xml of the above link looks like this: