[Google Maps API v3] google map not displaying

[John Biddulph]

Hi, I am having trouble showing my google maps in my page it's just blank, 
I have no errors, here is my code:

<div id="map_canvas"></div>
    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js";></script>
    <script 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDiiXgFNvsSIQueVJkl8HIoOhXoqimxolU";></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js";></script>
    <script type="javascript">
    var map = null;
    var CustomMarker = null;
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();

    function initialize() {
        $("#citylist").on("click", "li", function () {
        getDirections($(this).text());
        });
        var myLatlng = new google.maps.LatLng(51.49757618329838, 
0.23350238800048828);
        var markerLatLng = new google.maps.LatLng(51.49757618329838, 
0.23350238800048828);
        var myOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), 
myOptions);

        CustomMarker = new google.maps.Marker({
            position: markerLatLng,
            map: map,
            icon: 
"https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png";,
            animation: google.maps.Animation.DROP
        });
        directionsDisplay.setMap(map);
    }



    function getDirections(destination) {
        var start = CustomMarker.getPosition();
        var dest = destination;
        var request = {
            origin: start,
            destination: dest,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    </script>


    <!-- Include all compiled plugins (below), or include individual files as 
needed -->
    <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript">
$(document).ready(function() {
        $("#results" ).load( "fetch_pages.php"); //load initial records
        $("#towns" ).load( "fetch_towns.php"); //load initial records

        //executes code below when user click on pagination links
        $("#results").on( "click", ".pagination a", function (e){
                e.preventDefault();
                $(".loading-div").show(); //show loading element
                var page = $(this).attr("data-page"); //get page number from 
link
                $("#results").load("fetch_pages.php",{"page":page}, function(){ 
//get content from PHP page
                        $(".loading-div").hide(); //once done, hide loading 
element
                });

        });
        $('select[name="towns"]').change(function() {
                var town = $('select[name="towns"]').val();
                $("#results" ).load( "fetch_pages.php?rsTown="+town);
        });
});
</script>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-maps-js-api-v3+unsubscr...@googlegroups.com.
To post to this group, send email to google-maps-js-api-v3@googlegroups.com.
Visit this group at https://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.