Google Map Preparation

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
#content {
    padding: 0;
    position : absolute !important;
    top : 40px !important;
    right : 0;
    bottom : 40px !important;
    left : 0 !important;
}

img {
    position: relative;
    width:100%;
    /*left: 0px;
    //top: 0px;*/
    z-index: ;
}


h1{
    font-family: Verdana, Geneva, sans-serif;
    color: white;
    text-align: center;

}

#red{color: red}
#yellow{color: yellow}
#green{color: green}
#blue{color: blue}
#orange{color:orange}
#silver{color:white}



/* #home.ui-page{
    background: url(http://wamu.org/sites/wamu.org/files/styles/opengraph/public/images/attach/5784034624_5cb3f3bdcc_z.jpg?itok=SUIO8RSo) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
   /* background-size:100% 100%;
}*/



</style>

<script>
$(document).on('pageshow', '#index', function (e, data) {

    setTimeout(function () {
        // This is the minimum zoom level that we'll allow
        var minZoomLevel = 12;

        var map = new google.maps.Map(document.getElementById('map_canvas'), {
            zoom: minZoomLevel,
            center: new google.maps.LatLng(38.50, -90.50),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    }, 1);
});

</script>
</head>
<body>
<!--Home-->
<div data-role="page" id="home" data-theme="b">
<div data-role="header">
    <h1>DC Transit System<br>Mobile App</h1>
    
  </div>
  <div data-role="main" class="ui-content">
      ...