webpage appear blank but ok with htmlpreview.github #21547

riviere101 · 2017-11-07T16:18:32Z

riviere101
Nov 7, 2017

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>

Answered by winstliu

Nov 7, 2017

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/indexfusion.html#L9 needs to be changed to use HTTPS instead of plain HTTP.

View full answer

winstliu · 2017-11-07T17:45:34Z

winstliu
Nov 7, 2017

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/indexfusion.html#L9 needs to be changed to use HTTPS instead of plain HTTP.

0 replies

riviere101 · 2017-11-07T18:33:21Z

riviere101
Nov 7, 2017
Author

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

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

webpage appear blank but ok with htmlpreview.github #21547

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

GitHub Community

webpage appear blank but ok with htmlpreview.github #21547

riviere101 Nov 7, 2017

Replies: 2 comments

winstliu Nov 7, 2017

riviere101 Nov 7, 2017 Author

riviere101
Nov 7, 2017

winstliu
Nov 7, 2017

riviere101
Nov 7, 2017
Author