CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   wont load the Full map JS HTML5 (http://www.codingforums.com/showthread.php?t=244634)

natrox 11-25-2011 02:09 AM
wont load the Full map JS HTML5
 
Hey, i,m trying to make an application with JS and html5 i have tryed to make a google map who loads my position and let me choose a target position
i got it to work but sudenly the map have stoped loading as it shud i need to tilt my phone to get it to load the full map and i can`t figure out what i have done wrong:(
Code:

<!DOCTYPE html><html>
<head>
        <title>Sigvartsen</title>
        <meta name="author" content="Code Computerlove - http://www.codecomputerlove.com/" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <link href="lib/jquery.mobile-1.0rc1/jquery.mobile-1.0rc1.min.css" rel="stylesheet" />
        <link href="examples/jquery-mobile.css" type="text/css" rel="stylesheet" />
        <link href="photoswipe.css" type="text/css" rel="stylesheet" />
       
  <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=true&language=nb_NO"></script>
        <script type="text/javascript" src="lib/klass.min.js"></script>   
        <script type="text/javascript" src="lib/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="lib/jquery.mobile-1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
        <script type="text/javascript" src="code.photoswipe.jquery-2.1.6.min.js"></script>
       
        <script type="text/javascript">
               
                /*
                * IMPORTANT!!!
                * REMEMBER TO ADD  rel="external"  to your anchor tags.
                * If you don't this will mess with how jQuery Mobile works
                */
               
                (function(window, $, PhotoSwipe){
                       
                        $(document).ready(function(){
                               
                                $('div.gallery-page')
                                        .live('pageshow', function(e){
                                               
                                                var
                                                        currentPage = $(e.target),
                                                        options = {},
                                                        photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));
                                                       
                                                return true;
                                               
                                        })
                                       
                                        .live('pagehide', function(e){
                                               
                                                var
                                                        currentPage = $(e.target),
                                                        photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

                                                if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                                                        PhotoSwipe.detatch(photoSwipeInstance);
                                                }
                                               
                                                return true;
                                               
                                        });
                               
                        });
               
                }(window, window.jQuery, window.Code.PhotoSwipe));
               
        </script>
    <script type="text/javascript">
    var map;
  var directionDisplay;
  var directionsService;
  var pos;
  var stepDisplay;
  var markerArray = [];
var initialLocation;
//var oslo = new google.maps.LatLng(59.947639, 10.884469);
var browserSupportFlag =  new Boolean();
    function initialize() {
    directionsService = new google.maps.DirectionsService();
    // Create a map and center it on Manhattan.
    var oslo = new google.maps.LatLng(59.947639, 10.884469);
    var myOptions = {
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: oslo
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    // Create a renderer for directions and bind it to the map.
    var rendererOptions = {
      map: map
    }
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)
   
    // Instantiate an info window to hold step text.
    stepDisplay = new google.maps.InfoWindow();
  }
  function calcRoute() {
 
    // First, remove any existing markers from the map.
    for (i = 0; i < markerArray.length; i++) {
      markerArray[i].setMap(null);
    }
    // Now, clear the array itself.
    markerArray = [];
 
    // Retrieve the start and end locations and create
    // a DirectionsRequest using DRIVING directions.
//    var pos = document.getElementById("pos").value;
    var end = document.getElementById("end").value;
    var request = {               
        origin: pos,               
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };                               
    // Route the directions and pass the response to a
    // function to create markers for each step.
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        var warnings = document.getElementById("warnings_panel");
                var pos = document.getElementById("pos");
            warnings.innerHTML = "<b>" + response.routes[0].warnings + "</b>";
        directionsDisplay.setDirections(response);
        showSteps(response);
      }
    });
  }
 
  function showSteps(directionResult) {
    // For each step, place a marker, and add the text to the marker's
    // info window. Also attach the marker to an array so we
    // can keep track of it and remove it when calculating new
    // routes.
    var myRoute = directionResult.routes[0].legs[0];
 
    for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
    }
  }
 
  function attachInstructionText(marker, text) {
    google.maps.event.addListener(marker, 'click', function() {
      // Open an info window when the marker is clicked on,
      // containing the text of the step.
      stepDisplay.setContent(text);
      stepDisplay.open(map, marker);
    });
  }
 
        // Try HTML5 geolocation
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
          pos = new google.maps.LatLng(position.coords.latitude,

                                            position.coords.longitude);

            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
              content: 'Du er her.'
            });

            map.setCenter(pos);
          }, function() {
            handleNoGeolocation(true);
          });
        } else {
          // Browser doesn't support Geolocation
          handleNoGeolocation(false);
        }
     

      function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
          var content = 'Error: The Geolocation service failed.';
        } else {
          var content = 'Error: Your browser doesn\'t support geolocation.';
        }

        var options = {
          map: map,
          position: new google.maps.LatLng(60, 105),
          content: content
        };

        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
      }
function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
   
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '600px';
    mapdiv.style.height = '800px';
  }
}
 
      google.maps.event.addDomListener(window, 'load', initialize);                 
    </script>
     
    </head>
<body onload="initialize()">

<div data-role="page" id="Home">

        <div data-role="header">
                <!--<h1>PhotoSwipe</h1>-->
    <img src="http://sigvartsen.no/images/stories/app/contenthead.jpg" width="322" height="296" alt="sigvartsen"></div>
       
       
        <div data-role="content" >       
               
                <!--<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>-->               
               
                <ul data-role="listview" data-inset="true">
                        <li><a href="#tilbud">Tilbud</a></li>
                        <li><a href="#produkter">Produkter</a></li>
                        <li><a href="#goderad">Gode råd</a></li>
<!--                        <li><a href="#kart">Kart</a></li>
-->        <!--                <li><a href="#kalkstein">Kalkstein</a></li>
                        <li><a href="#quarella">Quarella</a></li>
                        <li><a href="#mosaikkpebble">Mosaikk/Pebble</a></li>
-->                </ul>
<!--                <ul data-role="listview" data-inset="true">
                        <li><a href="http://m.codecomputerlove.com/flickr-uploads/default.aspx" target="_blank">Code Computerlove</a></li>
                </ul>
-->               
        </div>

        <div data-role="footer">
    <table width="322" border="0">
  <tr>
    <td>
                        <a href="#omoss">Om oss</a>
               
</td>
    <td><a href="#kart">Kart</a></td>
    <td><h4>Kontakt</h4></td>
  </tr>
</table>
        </div>

</div>
<div data-role="page" data-add-back-btn="true" id="omoss">
        <div data-role="header">
                <h1>Om oss</h1>
    </div>
       
       
        <div data-role="content" >       
               
                <p>Om oss lorem ipsum</p>       
               
                <!--<ul data-role="listview" data-inset="true">
                        <li><a href="#marmor">Marmor</a></li>
                        <li><a href="#skifer">Skifer</a></li>
                        <li><a href="#granitt">Granitt</a></li>
                        <li><a href="#kalkstein">Kalkstein</a></li>
                        <li><a href="#quarella">Quarella</a></li>
                        <li><a href="#mosaikkpebble">Mosaikk/Pebble</a></li>
                </ul> -->       
<!--                <ul data-role="listview" data-inset="true">
                        <li><a href="http://m.codecomputerlove.com/flickr-uploads/default.aspx" target="_blank">Code Computerlove</a></li>
                </ul>
-->               
        </div>

        <div data-role="footer">
    <table width="322" border="0">
  <tr>
    <td><h4>Om oss</h4></td>
    <td><h4>Kart</h4></td>
    <td><h4>Kontakt</h4></td>
  </tr>
</table>
        </div>

</div>
<div data-role="page" data-add-back-btn="true" id="kart">
        <div data-role="header">
                <h1>Kart</h1>
    </div>       
       
        <div data-role="content" >       
<div style="text-align:center">
<!--<select id="start"> 
  <option value="625 8th Avenue, New York, NY, 10018">Port Authority Bus Terminal</option>
  <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
  <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>-->

<select id="end" onchange="calcRoute();">
  <option value="Brubakkveien 14 1083 Oslo">Sigvartsen proffavdeling</option>
  <option value="Trondheimsveien 457, 0962 Oslo">Grorud</option>
  <option value="Industriveien 10, 1337 Sandvika">Sandvika</option>
  <option value="Industrigata 11B, 3400 Lier">Drammen</option>
</select>
</div>
<div id="map_canvas" style="width:300px; height:400px; position:relative;">
</div>
&nbsp;
<div id="warnings_panel">
</div>
       


</div>
<div data-role="page" data-add-back-btn="true" id="goderad">
        <div data-role="header">
                <h1>Gode råd</h1>
    </div>
       
       
        <div data-role="content" >       
               
                <p>Gode råd lorem ipsum</p>       
               
        </div>

        <div data-role="footer">
    <table width="322" border="0">
  <tr>
    <td><h4>Om oss</h4></td>
    <td><h4>Kart</h4></td>
    <td><h4>Kontakt</h4></td>
  </tr>
</table>
        </div>

</div>
<div data-role="page" data-add-back-btn="true" id="tilbud">
        <div data-role="header">
                <h1>Tilbud</h1>
    </div>
       
       
        <div data-role="content" >       
               
                <p>Tilbud lorem ipsum</p>       
               
        </div>

        <div data-role="footer">
    <table width="322" border="0">
  <tr>
    <td><h4>Om oss</h4></td>
    <td><h4>Kart</h4></td>
    <td><h4>Kontakt</h4></td>
  </tr>
</table>
        </div>

</div>
<div data-role="page" data-add-back-btn="true" id="produkter">
        <div data-role="header">
                <h1>Produkter</h1>
    <img src="http://sigvartsen.no/images/stories/app/produkter_for.jpg" width="322" height="119"></div>
       
       
        <div data-role="content" >       
               
               
                <ul data-role="listview" data-inset="true">
                        <li><a href="#marmor">Marmor</a></li>
                        <li><a href="#skifer">Skifer</a></li>
                        <li><a href="#granitt">Granitt</a></li>
                        <li><a href="#kalkstein">Kalkstein</a></li>
                        <li><a href="#quarella">Quarella</a></li>
                        <li><a href="#mosaikkpebble">Mosaikk/Pebble</a></li>
</ul>               
        </div>

        <div data-role="footer">
<table width="322" border="0">
  <tr>
    <td><h4>Om oss</h4></td>
    <td><h4>Kart</h4></td>
    <td><h4>Kontakt</h4></td>
  </tr>
</table>        </div>

</div>



<div data-role="page" data-add-back-btn="true" id="marmor" class="gallery-page">

        <div data-role="header">
                <h1>Marmor</h1>
        </div>

        <div data-role="content">       
               
                <ul class="gallery">
               
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/ARABESCATO.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/ARABESCATO.jpg" alt="ARABESCATO" /></a></li>
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/BIANCO_CARRARA.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/BIANCO_CARRARA.jpg" alt="BIANCO CARRARA" /></a></li>
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/CREMA_MARFIL.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/CREMA MARFIL.jpg" alt="CREMA MARFIL" /></a></li>
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/CREME_ROYAL_ESTREMOZ.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/CREME ROYAL ESTREMOZ.jpg" alt="CREME ROYAL ESTREMOZ" /></a></li>
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/EMPERADOR_CLARO.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/EMPERADOR CLARO.jpg" alt="EMPERADOR CLARO" /></a></li>
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/EMPERADOR_OSCURO.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/EMPERADOR OSCURO.jpg" alt="EMPERADOR OSCURO" /></a></li>
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/INLACK_BROWN.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/INLACK BROWN.jpg" alt="INLACK BROWN" /></a></li>
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/NEGRO_MARQUINA.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/NEGRO MARQUINA.jpg" alt="NEGRO MARQUINA" /></a></li>
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/PORTORO.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/PORTORO.jpg" alt="PORTORO" /></a></li>
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/ROSSO_VERONA.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/ROSSO VERONA.jpg" alt="ROSSO VERONA" /></a></li>
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/RUIVINA.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/RUIVINA.jpg" alt="RUIVINA" /></a></li>
                        <li><a href="http://sigvartsen.no/images/stories/app/marmor/VERDE_GUATEMALA.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/marmor/thumb/VERDE_GUATEMALA.jpg" alt="VERDE GUATEMALA" /></a></li>
                </ul>
               
        </div>

        <div data-role="footer">
                <h4>&copy; 2011 Code Computerlove</h4>
        </div>

</div>
<div data-role="page" data-add-back-btn="true" id="skifer" class="gallery-page">

        <div data-role="header">
                <h1>Skifer</h1>
        </div>

        <div data-role="content">       
               
                <ul class="gallery">
               
                        <li><a href="http://sigvartsen.no/images/stories/app/skifer/AFRICAN_RUST.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/skifer/thumb/AFRICAN_RUST.jpg" alt="AFRICAN RUST" /></a></li>
                </ul>
               
        </div>

        <div data-role="footer">
                <h4>&copy; 2011 Code Computerlove</h4>
        </div>

</div>

<div data-role="page" data-add-back-btn="true" id="granitt" class="gallery-page">

        <div data-role="header">
                <h1>Granitt</h1>
        </div>

        <div data-role="content">       
               
                <ul class="gallery">
               
                        <li><a href="http://sigvartsen.no/images/stories/app/granitt/BLACK_GALAXY.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/granitt/thumb/BLACK_GALAXY.jpg" alt="BLACK GALAXY" /></a></li>
                </ul>
               
        </div>

        <div data-role="footer">
                <h4>&copy; 2011 Code Computerlove</h4>
        </div>

</div>

<div data-role="page" data-add-back-btn="true" id="kalkstein" class="gallery-page">

        <div data-role="header">
                <h1>Kalkstein</h1>
        </div>

        <div data-role="content">       
               
                <ul class="gallery">
               
                        <li><a href="http://sigvartsen.no/images/stories/app/kalkstein/AZUL_CACAIS.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/kalkstein/thumb/AZUL_CACAIS.jpg" alt="AZUL CACAIS" /></a></li>
                </ul>
               
        </div>

        <div data-role="footer">
                <h4>&copy; 2011 Code Computerlove</h4>
        </div>

</div>

<div data-role="page" data-add-back-btn="true" id="quarella" class="gallery-page">

        <div data-role="header">
                <h1>Quarella</h1>
        </div>

        <div data-role="content">       
               
                <ul class="gallery">
               
                        <li><a href="http://sigvartsen.no/images/stories/app/quarella/k_beige_duna.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/quarella/thumb/k_beige_duna.jpg" alt="k beige duna" /></a></li>
                </ul>
               
        </div>

        <div data-role="footer">
                <h4>&copy; 2011 Code Computerlove</h4>
        </div>

</div>

<div data-role="page" data-add-back-btn="true" id="mosaikkpebble" class="gallery-page">

        <div data-role="header">
                <h1>Mosaikk/Pebble</h1>
        </div>

        <div data-role="content">       
               
                <ul class="gallery">
               
                        <li><a href="http://sigvartsen.no/images/stories/app/mosaikkpebble/BARDUR_BEIGE_MOSAIQUE.jpg" rel="external"><img src="http://sigvartsen.no/images/stories/app/mosaikkpebble/thumb/BARDUR_BEIGE_MOSAIQUE.jpg" alt="BARDUR BEIGE MOSAIQUE" /></a></li>
                </ul>
               
        </div>

        <div data-role="footer">
                <h4>&copy; 2011 Code Computerlove</h4>
        </div>

</div>

</body>
</html>

xelawho 11-25-2011 02:13 AM
you need to set your fullmap variable to 5.

if that doesn't work, maybe a link to your page, or at least some code?

xelawho 11-25-2011 02:27 AM
it's not a problem with your map code and the rest of your code has way too many dependencies to debug with the code pasted (and btw, please use the # button to generate the correct code tags). I think you may have to post a link to your page.

natrox 11-25-2011 11:13 AM
atleest good to hear that my code is ok =)
here is a link : http://sigvartsen.no/app/index.html

Kart = Map

Kor 11-25-2011 01:20 PM
It is OK, except that some browsers will ask the user if he wants to share his location. If the user chooses not to, of course there will no map, i reckon.

natrox 11-25-2011 02:31 PM
I,m using it for a phone application so the user says OK when he installs it so it,s not a problem for me :p

natrox 11-25-2011 02:34 PM
The map wil load compleetely if i flip the phone but not instantly when i open the page. Same With browsers i need to refresh the page after opening the map
then i loads.
:confused:

xelawho 11-25-2011 02:42 PM
I'm just guessing here, but I think there may be a problem with giving your map div an initial % size. Are you experiencing the problem only when viewed on an iPhone? if so, try changing your detectBrowser function to give the div a size in px if it detects iPhone, just as a test.

natrox 11-25-2011 02:52 PM
i,m geting it on android aswell and browsers. But it loads the ful map as soon as i flip my phone and flip it up again :S

natrox 11-28-2011 11:26 AM
to change it from % to px dosent help. seems like it wont load automaticly so i need to make it load :S if i reload when im inside the map it shows up without anny problems at all . but if i only click the map it dosent load, only a litle part of it. anny ideas how i can make it load ?:rolleyes:


All times are GMT +1. The time now is 05:33 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.