Help
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Copilot Lvl 2
Message 1 of 3

webpage appear blank but ok with htmlpreview.github

Solved! Go to Solution.

I have a code created with fusion table tool from google and wondering how to put this code as a web page hosted on github. In the past, I had some code working but this one just show blank page, not 404 error. My repository name is ok and my older codes still works. I'm not very familiar with coding, I suppose the problem is simple but just can't see it. This code merge 2 layers to create a single map

Thanks a lot!

 

<!DOCTYPE html>
<html>
  <head>
  <style>
    #map-canvas { width:800px; height:800px; }
    .layer-wizard-search-label { font-family: sans-serif };
  </style>
  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
  </script>
  <script type="text/javascript">
    var map;
    var layer_0;
    var layer_1;
    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(46.14057653861868, -71.53444892016603),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      layer_0 = new google.maps.FusionTablesLayer({
        query: {
          select: "col2",
          from: "1RqEeaVdPtWAGNWM7k_N_nrURqlvnTOKnS18IknPv"
        },
        map: map,
        styleId: 2,
        templateId: 2
      });
      layer_1 = new google.maps.FusionTablesLayer({
        query: {
          select: "col11",
          from: "1cdGZr-udoeMT5apbUgROYMk92wZY10ZNWSf4aRcU"
        },
        map: map,
        styleId: 2,
        templateId: 2
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

 

2 Replies
Solution
Pilot Lvl 1
Message 2 of 3

Re: webpage appear blank but ok with htmlpreview.github

I checked out your site and was greeted with two errors in the developer console:

Mixed Content: The page at 'https://riviere101.github.io/indexfusion.html' was loaded over HTTPS, but requested an insecure script 'http://maps.google.com/maps/api/js?sensor=false'. This request has been blocked; the content must be served over HTTPS.

Uncaught ReferenceError: google is not defined
    at indexfusion.html:40

 

Therefore I believe that https://github.com/riviere101/riviere101.github.io/blob/951ca2b224a932cae88d27cfeb96ceafbe4c5601/ind... needs to be changed to use HTTPS instead of plain HTTP.

Copilot Lvl 2
Message 3 of 3

Re: webpage appear blank but ok with htmlpreview.github

thanks a lot, this put me on the right way. I had also to add an api key to drive map on his line