Two Google Maps in JQuery Mobile not working

Two Google Maps in JQuery Mobile not working

I'm new at Jquery and I need to get two maps working on a page in JQuery Mobile. I can't figure out what I'm doing wrong. I've tried page.show and still nothing works. 

here's my code: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"> 
    <title>App</title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <link rel="stylesheet" href="css/style.css">
    
<link rel="stylesheet" href="css/custom.css">
    <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>
    <script src="js/jquery.ui.map.full.min.js" type="text/javascript"></script>
      <script type="text/javascript">

            var dining;
            var infowindow;
            var markers = [];

            $('.page-map').live("pageshow", function() {
                initialize();
            });

            function initialize() {
var styles = [
    {
      stylers: [
        { hue: "#F68E1E" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },
{featureType: 'water',
      stylers: [
        { color: '#FF886C' }
      ]
    },
{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

    var latlng = new google.maps.LatLng(43.6667, -79.4167);
    var myOptions = {
      zoom: 6,
      center: latlng,
      mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
    };
dining = new google.maps.Map(document.getElementById("dining"),myOptions);
//Associate the styled map with the MapTypeId and set it to display.
 dining.mapTypes.set('map_style', styledMap);
  dining.setMapTypeId('map_style');
            }

            function doSearch() {
                deleteOverlays();
                var query = document.getElementById("queryInputd").value;

                var request = {
                  location: new google.maps.LatLng(43.6667, -79.4167),
                  radius: 100000,
                  keyword: [query]
                };
                infowindow = new google.maps.InfoWindow();
                var service = new google.maps.places.PlacesService(dining);
                service.search(request, callback);
            }

            function callback(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                  for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                  }
                }
            }

            function createMarker(place) {
                var placeLoc = place.geometry.location;
                var marker = new google.maps.Marker({
    position: place.geometry.location,
    map: dining,
 icon: 'images/blanko.png',
            title: 'A Number Marker'
  });

                google.maps.event.addListener(marker, 'click', function() {
                  infowindow.setContent('<span style="padding: 0px; text-align:left" align="left"><h4>'+ place.name + '</h4><h4>'+ place.formatted_address + '</h4><h4>'+ place.url +'</h4></span>');
                  infowindow.open(dining, this);
                });
                markers.push(marker);
            }

            function setAllMap(dining) {
                for (var i = 0; i < markers.length; i++) {
                  markers[i].setMap(dining);
                }
            } 
            function clearOverlays() {
                setAllMap(null);
            }

            function deleteOverlays() {
                clearOverlays();
                markers = [];
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    <script type="text/javascript">

            var cafe;
            var infowindow;
            var markers = [];

            $('.page-map').live("pageshow", function() {
                initialize();
            });

            function initialize() {
var styles = [
    {
      stylers: [
        { hue: "#BFD8F1" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },
{featureType: 'water',
      stylers: [
        { color: '#7EBEFF' }
      ]
    },
{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

    var latlng = new google.maps.LatLng(43.6667, -79.4167);
    var myOptions = {
      zoom: 6,
      center: latlng,
      mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
    };
cafe = new google.maps.Map(document.getElementById("cafe"),myOptions);
//Associate the styled map with the MapTypeId and set it to display.
 cafe.mapTypes.set('map_style', styledMap);
  cafe.setMapTypeId('map_style');
            }

            function doSearch() {
                deleteOverlays();
                var query = document.getElementById("queryInputc").value;

                var request = {
                  location: new google.maps.LatLng(43.6667, -79.4167),
                  radius: 100000,
                  keyword: [query]
                };
                infowindow = new google.maps.InfoWindow();
                var service = new google.maps.places.PlacesService(cafe);
                service.search(request, callback);
            }

            function callback(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                  for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                  }
                }
            }

            function createMarker(place) {
                var placeLoc = place.geometry.location;
                var marker = new google.maps.Marker({
    position: place.geometry.location,
    map: cafe,
 icon: 'images/blank.png',
            title: 'A Number Marker'
  });

                google.maps.event.addListener(marker, 'click', function() {
                  infowindow.setContent('<span style="padding: 0px; text-align:left" align="left"><h4>'+ place.name + '</h4><h4>'+ place.formatted_address + '</h4><h4>'+ place.url +'</h4></span>');
                  infowindow.open(cafe, this);
                });
                markers.push(marker);
            }

            function setAllMap(cafe) {
                for (var i = 0; i < markers.length; i++) {
                  markers[i].setMap(cafe);
                }
            } 
            function clearOverlays() {
                setAllMap(null);
            }

            function deleteOverlays() {
                clearOverlays();
                markers = [];
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
</head>
<body>
    <div data-role="page" id="home">
      <div data-role="header">
        <h1>PlayBiz</h1>
      </div>
      <div data-role="content">
      <img src="images/splash.png" width="296" height="370" alt="Splash Page">
      <div data-role="controlgroup" data-type="horizontal">
      <a href="#dinings" data-transition="slide" data-role="button" data-direction="reverse" id="orange" >Playtime</a>
      <a href="#" data-transition="slide" data-role="button" data-direction="reverse" >OR</a>
                <a href="#cafes" data-role="button" data-transition="slide" id="blue">Business</a>
                </div>
     </div>
    
    </div>

    <div id="dinings" data-role="page" class="page-map">
      
        <div data-role="header">
            <a href="#home" data-prefetch data-icon="home" data-transition="slide"></a>
        <h1>Play</h1>
        </div>
        <div id="map-container1" data-role="content">
 
                     <select id="queryInputd" name="type">
       <option value="food">Grab A Bite</option>
      <option value="shopping_mall">Shopping</option>
      <option value="casino">Casino</option>
      <option value="night_club">Night Clubs</option>
      <option value="museum">Museums</option>
      <option value="art_gallery">Art Galleries</option>
    </select>
                    
                    <input type="button" value="Find" onclick="doSearch()" />
 
                 
                    <div id="searchwell"></div>
            </div>
                  <div id="dining" style="height: 654px; width: 100%;"></div>
        </div>
         <div id="cafes" data-role="page" class="page-map">
        
        <div data-role="header">
            <a href="#home" data-prefetch data-icon="home" data-transition="slide" data-direction="reverse"></a>
        <h1>Biz</h1>
        </div>
        <div id="map-container" data-role="content">
        <div class="ui-bar ui-bar-c">
            <select id="queryInputc" name="type">
      <option value="restaurant">Dinning Out</option>
      <option value="cafe">Cafes and Bistros</option>
      <option value="stadium">Stadiums and Sporting Events</option>
      <option value="lodging">Accommodations</option>
      <option value="car_rental">Car Rentals</option>
    </select>
                    
                    <input type="button" id="blue1" value="Find" onclick="doSearch()" />
 
                 
                    <div id="searchwell2"></div>
            </div>
                  <div id="cafe" style="height: 654px; width: 100%;"></div>
        </div>
   </div>

   </body>
</html>