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

Question

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: [email protected]";
            var maptext = "<div class='map_marker'><strong>Name</strong><br />Address1, <br />Address2, <br />Address3<br /><br />Tel: 12345678<br />Email: [email protected]</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>

Answer 1

You have to either

1) take all the whitespace out of the scripts and iframes so WordPress does not add <p> tags and then the JS and iframe links will work, or

2) disable autop in the post editor for all posts/pages (see http://codex.wordpress.org/Function_Reference/wpautop ) so WP doesn't add paragraph breaks, or

3) do the following, which leaves autop enabled globally, but lets you disable it with and tags in individual posts and pages.

Add the function below to functions.php and use the two tags

<!-- noformat on --> and <!-- noformat off -->

in your page/post editor, i.e.

    text will be rendered *with* autop

    <!-- noformat on -->

    text will be rendered *without* autop

    <!-- noformat off -->

    text will be rendered *with* autop

Content outside of the two format tags will have autop enabled, as noted.

Add to functions.php of the theme:

// <!-- noformat on --> and <!-- noformat off --> functions

function newautop($text)
{
    $newtext = "";
    $pos = 0;

    $tags = array('<!-- noformat on -->', '<!-- noformat off -->');
    $status = 0;

    while (!(($newpos = strpos($text, $tags[$status], $pos)) === FALSE))
    {
        $sub = substr($text, $pos, $newpos-$pos);

        if ($status)
            $newtext .= $sub;
        else
            $newtext .= convert_chars(wptexturize(wpautop($sub)));      //Apply both functions (faster)

        $pos = $newpos+strlen($tags[$status]);

        $status = $status?0:1;
    }

    $sub = substr($text, $pos, strlen($text)-$pos);

    if ($status)
        $newtext .= $sub;
    else
        $newtext .= convert_chars(wptexturize(wpautop($sub)));      //Apply both functions (faster)

    //To remove the tags
    $newtext = str_replace($tags[0], "", $newtext);
    $newtext = str_replace($tags[1], "", $newtext);

    return $newtext;
}

function newtexturize($text)
{
    return $text;   
}

function new_convert_chars($text)
{
    return $text;   
}

remove_filter('the_content', 'wpautop');
add_filter('the_content', 'newautop');

remove_filter('the_content', 'wptexturize');
add_filter('the_content', 'newtexturize');

remove_filter('the_content', 'convert_chars');
add_filter('the_content', 'new_convert_chars');

Answer 2

My code is working @ialocin

If you want to use my code for a map on your wordpress site, you've to do 6 things.

1 -- Follow songdogtechs 3rd suggestion

2 -- Paste my code into wordpress' page editor with the text tab, not visual

3 -- Surround my code with the no format tags <!-- noformat on --> 'ALL MY CODE IN BETWEEN' <!-- noformat off -->

4 -- change the gprs coordinates to the location of your destination, Right-click a place or area on google maps. Select What's here? Grab and swap the coordinates for mine, there's only two to change.

5 -- Change the McDonald's Headford Road Drive Thru in the two places it exists in my code to the exact name of your location on google maps

6 -- Get a google maps api key https://developers.google.com/maps/documentation/embed/guide#api_key and replace the key in my code for yours