Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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>
    Last edited by Kor; 11-25-2011 at 10:26 AM. Reason: wrap the code [code][/code]

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    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?

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    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.

  • #4
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    atleest good to hear that my code is ok =)
    here is a link : http://sigvartsen.no/app/index.html

    Kart = Map

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    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.

  • #9
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #10
    New Coder
    Join Date
    Nov 2011
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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 ?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •