<div style="margin-left: 10px; width: 300px; float: right;">
<div id="routeYouRouteViewerTabButtons" style="margin-bottom: 10px;"></div>
<div id="routeYouRouteViewerTabPane"></div>
</div>
<div id="routeYouRouteViewerProfile" style="margin-bottom: 10px;"></div>
<div id="routeYouRouteViewerMap"></div>
<script type="text/javascript" src="//plugin.routeyou.com/routeviewer/3.0.js"></script>
<script type="text/javascript">
RTY.RouteViewer.load({
//RouteYou key
'key': '25578206faf6c7cd92fc96526177379d',
//google api key
'map.api.key': 'AIzaSyC_JHzxNW80JQqdloBAe7UuoAgKKGd3wLI',
//language
'language': 'en',
//link to html elements
'title.div': 'routeYouRouteViewerTitle',
'profile.div': 'routeYouRouteViewerProfile',
'map.div': 'routeYouRouteViewerMap',
'detail.div': 'routeYouRouteViewerDetail',
//route id
//'params.route.id': 5225382,
'profile.div': 'routeYouRouteViewerProfile',
'map.div': 'routeYouRouteViewerMap',
'tabButtons.div': 'routeYouRouteViewerTabButtons',
'tabPane.div': 'routeYouRouteViewerTabPane',
'tabPane.components': ['suggest', 'detail', 'download'],
'map.show.undoControl': true,
'map.show.saveControl': true,
'map.show.routeStatistics': true,
'suggest.enable': true,
//setting width of route and opacity
'map.route.line.normal.standard.width': 7,
'map.route.line.normal.standard.opacity':1,
'map.route.line.normal.standard.fill.width':5,
'map.route.line.normal.standard.fill.opacity':0.7,
//setting colors on standard map
'map.route.line.normal.standard.color': '#454856',
'map.route.line.normal.standard.fill.color':'#C83732',
//color of the route on top of google satellite (legacy)
'map.route.line.normal.satellite.color': '#454856',
//set available map types
'map.availableTypes':['satellite','roadmap','terrain','osm'],
//select google satellite as default map
'map.type':'osm',
//adding google terrain on top of map of roadmap
'map.overlays':['terrain'],
//setting style for height profile
'style.fill.color':'#454856',
'style.line.color':'#454856',
'style.fill.color':'#C83732',
'style.fill.opacity':0.7,
'style.line.width':1,
'style.line.color':'#454856'
});
</script>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.