Fifth Water Hot Springs/Google Map: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
(No difference)
|
Latest revision as of 19:44, 2 November 2015
http://www.roadtripryan.com/go/map/iframe-gpx?id=140
<iframe src="http://www.roadtripryan.com/go/map/iframe-gpx?id=140" style="width: 100%; height: 510px; border: 0px; padding: 0px; margin: 0px"></iframe>
GPX: http://www.roadtripryan.com/go/gpx/full/140
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="/go/layouts/fall-2014/js/c191114.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="/go/js/google-map.js"></script>
<script type="text/javascript" src="/go/js/ajroadtrips/topomaplayer.js"></script>
</head>
<body>
<script type="text/javascript">
var markers = new Array();
var markersCount = 0;
var map;
function mapLoad() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
"tnmbasemap",
google.maps.MapTypeId.HYBRID,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE
]
}
};
map = new google.maps.Map(document.getElementById("gmap"), mapOptions);
var bounds = new google.maps.LatLngBounds ();
map.mapTypes.set('tnmbasemap', tnmBaseMapType);
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
jQuery.get("/go/gpx/full/140", {}, function (data) {
jQuery(data).find("trk").each(function () {
var points = [];
$(this).find("trkpt").each(function() {
var lat = $(this).attr("lat");
var lon = $(this).attr("lon");
var p = new google.maps.LatLng(lat, lon);
points.push(p);
bounds.extend(p);
});
new google.maps.Polyline({
// use your own style here
path: points,
strokeColor: "#ff0000",
strokeOpacity: .7,
strokeWeight: 4,
map: map
});
});
jQuery(data).find("wpt").each(function() {
var infowindow = new google.maps.InfoWindow({
content: $(this).find("name").text()
});
var lat = $(this).attr("lat");
var lon = $(this).attr("lon");
var myLatlng = new google.maps.LatLng(lat, lon);
bounds.extend(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
markers[markersCount] = marker;
markersCount++;
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
});
// fit bounds to track
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
})
}
$(document).ready(function(){
mapLoad();
$('#tab-container').bind('easytabs:after', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(markers[0].getPosition());
map.setZoom(12);
}) ;
}
);
//]]>
</script>
<div id="gmap" style="width:100%;height:500px;padding: 0px; margin: 0px"></div>
</body>
</html>