title: Adding map image to intel xdk geolocation-co-ordinates already showing up
body: <p>I am trying to add an image of the app for geolocation co-ordinates to my app on the Intel XDK program. I have already obtained the co-ordinates for latitude and longitude which show up correctly. The map on the side of the screen however, needs to be dragged to update the location co-ordinates. Currently, the geolocation is accessed by pressing a button which implements the onclick listener. </p>
  
  <p>Is there anyway to get an image to appear updated from google maps or to get a map to update dynamically so that it shows my actual co-ordinates rather than the town I select on the sidemap. For example, if I was in New York, I would need to drag the side map to New York to get those co-ordinates. If I were to go to Boston, the co-ordinates would still appear as New York unless I drag it to Boston. Is there anyway to get this to update as I leave for somewhere else and access the emulator in another city? Below is my code as it is so far with the co-ordinates appearing on the blank white screen.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;p
  &lt;!--HTML5 doctype--&gt;
  
  &lt;head&gt;
  &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
  &lt;meta http-equiv="Pragma" content="no-cache"&gt;
  &lt;script type="text/javascript" charset="utf-8" src="intelxdk.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript"&gt;
      var isIntel=window.intel&amp;&amp;window.intel.xdk
      // This event handler is fired once the intel libraries are ready
      function onDeviceReady() {
          //hide splash screen now that our app is ready to run
          intel.xdk.device.hideSplashScreen();
          setTimeout(function () {
              $.ui.launch();
          }, 50);
      }
      //initial event handler to detect when intel is ready to roll
      document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
  &lt;/script&gt;
  &lt;script src="js/appframework.ui.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      if(isIntel)
          $.ui.autoLaunch = false;
      $.ui.useOSThemes = true; //Change this to false to force a device theme
      $.ui.blockPageScroll();
      $(document).ready(function () {
          if ($.ui.useOSThemes &amp;&amp; (!$.os.ios||$.os.ios7))
              $("#afui").removeClass("ios");
      });
  &lt;/script&gt;
  &lt;link href="css/icons.css" rel="stylesheet" type="text/css"&gt;
  &lt;link href="css/af.ui.css" rel="stylesheet" type="text/css"&gt;
  &lt;script&gt;
      function get_location() {
              navigator.geolocation.getCurrentPosition(show_map);
              }
          function show_map(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
  
              document.write("latitude :" + latitude + "&lt;br&gt;");
              document.write("longitude :" + longitude + "&lt;br&gt;");
          }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="afui" class="ios"&gt;
      &lt;div id="header" class="header"&gt;&lt;/div&gt;
      &lt;div id="content" style=""&gt;
          &lt;div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected"
          style="width: 100%; height: 100%; background-color: rgb(128, 191, 255);"
          data-appbuilder-object="page" data-header="header_0" data-footer="default_footer"&gt;
  
  
              &lt;div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container"&gt;
                  &lt;img src="images/intel.jpg" style="width: 100%;" alt="Title" data-appbuilder-object="image"
                  class="" title="Main Screen"&gt;
                  &lt;div class="text_item" data-appbuilder-object="text" style="text-align: center;"&gt;Welcome to the Tutorials App.
                      &lt;br&gt;Please select an option.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel" title="About" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
          style="width: 100%; height: 100%; background-color: rgb(128, 191, 255);"
          data-header="header_0" data-footer="default_footer"&gt;
              &lt;div class="container" style="width: 100%; height: 100%;" data-appbuilder-object="container"&gt;
                  &lt;img src="images/intel.jpg" style="width: auto; height: 40%; display: block; margin-left: auto; margin-right: auto;"
                  alt="Title" data-appbuilder-object="image" class="" title="About"&gt;
                  &lt;div class="text_item" data-appbuilder-object="text" style="text-align: center;"&gt;The about screen
                      &lt;br&gt;about
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel" title="Tutorials" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
          style="" data-header="header_0" data-footer="default_footer"&gt;
              &lt;ul class="list" data-appbuilder-object="list" style=""&gt;
                  &lt;li&gt;&lt;a href="#page_3"&gt;HTML Tutorial&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#page_4"&gt;CSS Tutorial&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#page_5"&gt;Geolocation&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="panel" title="HTML Tutorial" id="page_3" data-appbuilder-object="page"
          style=""&gt;
              &lt;div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container"&gt;
                  &lt;img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
                  data-appbuilder-object="image" class="" title="intel"&gt;
                  &lt;div class="text_item" data-appbuilder-object="text" style="text-align: center;"&gt;Use HTML like this.
                      &lt;iframe width="100%" src="//www.youtube.com/embed/9gTw2EDkaDQ" frameborder="0"
                      allowfullscreen=""&gt;&lt;/iframe&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel" title="CSS Tutorial" data-nav="nav_0" id="page_4" data-appbuilder-object="page"
          style="width: 100%;" data-header="header_0" data-footer="footer_2"&gt;
              &lt;div class="container" style="width: 100%; height: 100%; position: relative;" data-appbuilder-object="container"&gt;
                  &lt;img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
                  data-appbuilder-object="image" class="" title="intel1"&gt;
                  &lt;div class="text_item" data-appbuilder-object="text" style="text-align: center;"&gt;Use CSS like this&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel" title="Geolocation" data-nav="nav_0" id="page_5" data-appbuilder-object="page"
          style="width: 100%;" data-header="header_0" data-footer="footer_3"&gt;
              &lt;div class="container" style="width: 100%; height: 100%;" data-appbuilder-object="container"&gt;
                  &lt;img src="images/intel.jpg" style="width: 100%; margin-top: 100px;" alt="Title"
                  data-appbuilder-object="image" class="" title="intel2"&gt;
                  &lt;div class="text_item" data-appbuilder-object="text" style="text-align: center;"&gt;Find Geolocation here&lt;/div&gt;
                  &lt;a class="button" href="#page_8" style="width: 100%; position: relative; z-index: 2;"
                  data-appbuilder-object="button" data-transition="slide" id="button_8"
                  onclick="get_location();"&gt;Geolocation&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="panel" title="Display Location" data-nav="nav_0" id="page_7" data-appbuilder-object="page"
          style="" data-footer="default_footer" data-header="header_0"&gt;
  
              &lt;div&gt;
  
                  &lt;title style=""&gt;Geolocation&lt;/title&gt;
                  &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" style=""&gt;
                  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"
                  style=""&gt;
                  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"
                  style=""&gt;&lt;/script&gt;
                  &lt;script src="intelxdk.js" style=""&gt;&lt;/script&gt;
                  &lt;script src="cordova.js" style=""&gt;&lt;/script&gt;
                  &lt;script src="xhr.js" style=""&gt;&lt;/script&gt;
  
                  &lt;script type="text/javascript" src="js/main.js" style=""&gt;&lt;/script&gt;
  
                  &lt;style type="text/css" style=""&gt;
                      * { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); -ms-touch-action:none;}
                  &lt;/style&gt;
  
  
  
  
                  &lt;div id="map_canvas" style="width:100%; text-align:center;"&gt;
                      &lt;h1&gt;Determining Your Location&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;/body&gt;
              &lt;/div&gt;
  
  
  
  
          &lt;/div&gt;
  
          &lt;footer&gt;&lt;a href="#main" class="icon home" style=""&gt;Home&lt;/a&gt;&lt;a href="#page_1" class="icon info"
              style=""&gt;About&lt;/a&gt;&lt;a href="#page_2" class="icon star" style=""&gt;Tutorials&lt;/a&gt;
              &lt;a href="#page_7" class="icon key" style=""&gt;Resources&lt;/a&gt;
          &lt;/footer&gt;
          &lt;div class="panel" title="New Page" data-nav="nav_0" id="page_7" data-appbuilder-object="page"
          style=""&gt;&lt;/div&gt;
          &lt;div class="panel" title="New Page" data-nav="nav_0" id="page_8" data-appbuilder-object="page"
          style=""&gt;&lt;/div&gt;
          &lt;div class="panel" title="New Page" data-nav="nav_0" id="page_9" data-appbuilder-object="page"
          style=""&gt;&lt;/div&gt;
          &lt;div class="panel" title="New Page" data-nav="nav_0" id="page_10" data-appbuilder-object="page"
          style=""&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="footer"&gt; &lt;a class="icon home"&gt;Home&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="navbar" class="footer"&gt; &lt;a class="icon home"&gt;Home&lt;/a&gt;
  &lt;/div&gt;
  &lt;header id="header_0" data-appbuilder-object="header"&gt;
      &lt;h1 class="apptitle"&gt; Tutorials App&lt;/h1&gt;
  &lt;/header&gt;
  &lt;nav id="nav_0" data-appbuilder-object="nav"&gt;
      &lt;h1&gt;Side Menu&lt;/h1&gt;
  &lt;/nav&gt;
  &lt;footer id="footer_1" data-appbuilder-object="footer"&gt;&lt;a href="#page_1" class="icon left"&gt;Previous&lt;/a&gt;&lt;a href="#main" class="icon home"&gt;Home&lt;/a&gt;
      &lt;a href="#page_4" class="icon right"&gt;Next&lt;/a&gt;
  &lt;/footer&gt;
  &lt;footer id="footer_2" data-appbuilder-object="footer"&gt;&lt;a href="#page_3" class="icon left"&gt;Previous&lt;/a&gt;&lt;a href="#main" class="icon home"&gt;Home&lt;/a&gt;
      &lt;a href="#page_5" class="icon right"&gt;Next&lt;/a&gt;
  &lt;/footer&gt;
  &lt;footer id="footer_3" data-appbuilder-object="footer"&gt;&lt;a href="#page_4" class="icon left"&gt;Previous&lt;/a&gt;&lt;a href="#main" class="icon home"&gt;Home&lt;/a&gt;
      &lt;a href="#page_7" class="icon right"&gt;Next&lt;/a&gt;
  &lt;/footer&gt;
  &lt;footer id="default_footer" data-appbuilder-object="footer"&gt;&lt;a href="#main" class="icon home"&gt;Home&lt;/a&gt;&lt;a href="#page_1" class="icon info"&gt;About&lt;/a&gt;
      &lt;a href="#page_2" class="icon star"&gt;Tutorials&lt;/a&gt;&lt;a href="#page_7" class="icon key"&gt;Resources&lt;/a&gt;
  &lt;/footer&gt;
  
  
  
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p>END EDIT <strong>*************************************************************************</strong></p>
  
  <p>I removed the two html tags before pasting and saving. The above is the edited code where I was trying to get the satellite and the map to show up. I am still only getting the co-ordinates to show up on the white screen. Currently I have a button which links from the geolocation page, id= page_5 to the display location page, id=page_7. the co-ordinates are showing up on that page, but still no sign of the map/satellite image. Is there anyway to get them to appear either both on one page, or on two separate pages which I can link? </p>
  
  <p>When I look at the design page I can see "determining your location" but this does not show up within the emulator. </p>