Placing google maps into a wordpress page using the wordpress page editor

I’m creating a website for a restaurant, I have working code that does what I want. Displays a map. Under the map, I’ve a form with two inputs. The first input allows someone to specify where they want directions from and the second input is already filled out, it’s set as the location of the restaurant. On submit, the directions are displayed on the same page. My problem is, the code works fine on a simple html page, but when I try to add the code to a page with the WordPress admin panel using the text tab in edit page, the map displays, but form doesn’t seem to be working.

Here’s the working code

<div id="map-content">
<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBtSeHNLckz6YWwfFcyx4CASiJUN6ohbCk&q=McDonald's,Headford,Road,Drive, Thru">    
</iframe>
</div>


                <div id="map"></div>

<div id="get-directions">
            <h2>Get directions:</h2>
              <div id="map_directions_controls">
                <div class="from">
                    <label class="address">From: </label><input id="fromAddress" name="from" value="" class="textbox txtMapDirections" type="text">
                </div>
                    <br>
                <div class="to">
                    <label class="address">To:  &nbsp;  &nbsp;  &nbsp;</label><input id="toAddress" name="to" value="" class="textbox txtMapDirections" type="text">
                </div>
                    <br>
                    <input name="submit" value="Get Directions" onclick="calcRoute(); return false" class="button button_directions" type="submit">
                </div>
                <div id="map_directions"></div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
    <script type="text/javascript">    
        var map;
        var directionDisplay;
        var directionsService;

        window.onload = function () {
            init();
        }

        function init() {
            var latlng = new google.maps.LatLng(53.279940, -9.049890);
            var myOptions = {
                zoom: 16,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: true,
                mapTypeControl: true,
                mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }
            };
            map = new google.maps.Map(document.getElementById("map"), myOptions);


            var maptextparam = "<strong>Name</strong><br />Address1, <br />Address2, <br />Address3<br /><br />Tel: 12345678<br />Email: info@website.com";
            var maptext = "<div class='map_marker'><strong>Name</strong><br />Address1, <br />Address2, <br />Address3<br /><br />Tel: 12345678<br />Email: info@website.com</div>";

            if (maptextparam != '') {
                var infowindow = new google.maps.InfoWindow({ content: maptext });
                var marker = new google.maps.Marker({ position: latlng, map: map, title: maptextparam });
            }

            var directions = "true";
            if (directions == "true") {
                directionsDisplay = new google.maps.DirectionsRenderer();
                directionsService = new google.maps.DirectionsService();
                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById("map_directions"));

                document.getElementById('toAddress').value = "McDonald's Headford Road Drive Thru";
            } else {
                document.getElementById('map_directions_controls').style.display = 'none';
                document.getElementById('map_directions').style.display = 'none';
            }
        }


        function calcRoute() {
            var start = document.getElementById("fromAddress").value;
            var end = document.getElementById("toAddress").value;

            if (end == "McDonald's Headford Road Drive Thru") {
                end = "53.279940, -9.049890";
            }

            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                } else {
                    alert("Please enter a valid input in the 'From' box");
                };
            });
        }

    </script>          

</div>