MapExamples

mostly w3schools examples sloppily stapled together. Need to learn more HTML & JS in order to repurpose, refine

HTML

<!DOCTYPE HTML>
<html>
<head>
    <title>OpenLayers Basic Example</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>
    <script>
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }

    function showPosition(position) {
        var x = document.getElementById("demo");
        x.innerHTML = "Latitude: " + position.coords.latitude +
        "<br>Longitude: " + position.coords.longitude;
    }

    function giveLongitude() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
            var x = document.getElementById("demo");
            x.innerHTML = position.coords.longitude;
            return position.coords.longitude
        } else {
            x.innerHTML = "Geolocation is not supported by this browser.";
        }
    }
        // 
    function initmaps(Longitude, Latitude){   
        map = new OpenLayers.Map("mapdiv");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);

        var lonlat = new OpenLayers.LonLat(-81.86261, 41.411597).transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
          );

        var zoom = 13;

        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);
        markers.addMarker(new OpenLayers.Marker(lonlat));

        map.setCenter(lonlat, zoom);
    }
    </script>

    <style>
    #mapdiv { width:350px; height:250px; }
    div.olControlAttribution { bottom:3px; }
    </style>

</head>

<body onload="getLocation(); initmaps();">
    
    <div id="demo"></div>
    <p>My HTML page with an embedded map</p>
    <div id="mapdiv"></div>
    
</body>
</html>