Integration of custom Google maps in Facebook page

Posted on Posted in Internet integration of maps

Interesting and useful map I made for website Velotouring BG for Facebook page. This is an interactive map that shows with several layers different options that the site offers for cycling. Added to the page with the app Static HTML , in tab is the whole code of html map.

velotouring
For map itself been used standard examples to create page with a map from Google.
Bike routes are provided as base layer on the map, but are fully functional and can be seen information to them.
var ctaLayer = new google.maps.KmlLayer({
url: 'http://path_to_.kml',
preserveViewport:true
});

As additional options to the map can optionally show layers of information on trafficking routes (how comfortable cycling), accommodation and bicycle repair shops around the country. They are called by “text / javascript” still in the header section:
var layers=[];
layers[0] = new google.maps.KmlLayer('path_to.kml', { preserveViewport: true });
layers[1]....
layers[2].....

The uniqueness of the map is in combining different types of data – KML files – created in Google Earth and exported from Google maps, and Fusion tables with geolocation by address, ZIP code or Longitudes. This allows both to add different information and to display various fields and data. Fusion tables have been added:
layers[2] = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '1MiFU-************************(кода в линка)',
}
});
style.fillOpacity = '0.8';

Layers can show individually and collectively, according to the information you need.
In the body section, the layers are selected and displayed with the following code:
Traffic < input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/>
Accommodation< input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>
Bike repear < input type="checkbox" id="layer_03" onclick="toggleLayers(2);"/>
< div id="map_canvas" style="height:500px; width:100%;">


And toggleLayers(2) is layers[2]
You can see and use the map on Facebook page Velotouring BG – cycling and Touring or on velotouring-bg front page.
velotouring2