Google Maps API not loading map to page

Question

I'm a beginner and was playing around with Javascript and GMAPS API v3. At first the map was loading to my page, but then when I created a form on that same page such that the user gives coordinates and upon clicking the submit button, the map should load. Now I've noticed two things: 1) It is constantly giving the error: TypeError: s is null https://maps.gstatic.com/mapfiles/api-3/17/13/main.js 2)The API is loading correctly, but the map is not being displayed.

My JavaScript:

var marker;
var mapProp;
var map;
var myCenter;

function initialize() {

    mapProp = {
        center: myCenter,
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    marker = new google.maps.Marker({
        position: myCenter,
    });

    marker.setMap(map);
}

function pan() {
    myCenter = new google.maps.LatLng(document.getElementById("latitude").value, document.getElementById("longitude").value);

    map.panTo(myCenter);
}

google.maps.event.addDomListener(window, 'load', initialize);

My HTML:

<div id="googleMap"></div>
<form method="get">
    <fieldset>
        <legend>Redirect to:</legend>
        <label for="latitude">Latitude:</label>
        <input type="text" id="latitude">
        <br>
        <label for="longitude">Longitude:</label>
        <input type="text" id="longitude">
        <br>
        <button id="submit" onclick="pan()">Submit</button>
    </fieldset>
</form>

And My CSS file:

#googleMap {
    width: 800px;
    height: 600px;
    border: 2px solid black;
}
fieldset {
    display: block;
    width: 450px;
    border: 2px solid black;
    position: fixed;
    top: 5px;
    right: 5px;
}
legend {
    padding: 0.2em 0.5em;
    border:1px solid black;
    color:black;
    font-size:90%;
    text-align:right;
}
label {
    float:left;
    width:25%;
    margin-right:0.5em;
    padding-top:0.2em;
    text-align:right;
    font-weight:bold;
}
#submit {
    position: relative;
    margin-top: auto;
    margin-left: 63%;
}

Answer 1

1. You need to define a center point when creating the map object.

2. Do not use a <form> and a submit button but bind an event listener to your button.

For example:

var button = document.getElementById("panButton");
button.addEventListener("click", pan);

Working example:

JSFiddle demo

Hope this helps.