Fifth Water Hot Springs/Google Map

From Omnia
Jump to navigation Jump to search

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>
Retrieved from "https://aznot.com/index.php?title=Fifth_Water_Hot_Springs/Google_Map&oldid=2614"