Reputation: 65

Google Maps API and HTML 5

I'm new to Stackoverflow so be kind.

I've been working on a project that uses the google maps api and some other stuff to make a game. The idea is to use geolocation data to clear the fog off of the map (the map is filled with fog when you start and you have to walk around to clear the fog)

The only problem is that geolocation needs HTML5 to function and every time I change my doctype from strict to 5 the map doesn't load. I could understand if the reverse was happening but I can't seem to solve this.

If anyone knows how to deal with this I'd appreciate it greatly.

The site page is http://fog.jamiepat.es

and here is the code:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>Fog o&lsquo; War</title>
  <link rel="stylesheet" href="css/style.css" />
  <link rel="shortcut icon" href="favicon.ico">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDFSlrd4CM9cp2ljFi62357dPjF8gSHikg&sensor=false"type="text/javascript"></script>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
  <script src="js/variables.js" type="text/javascript"></script>
  <script src="js/functions.js" type="text/javascript"></script>


</head>
<body onload="initialize()">
  <div id="screen"></div>
  <div id="splash"><div class="logo"></div><div class="footnotes filler"></div></div>
  <div id="bob"></div>
  <div id="map_canvas"></div>

  <div id="sidebar">

    <h1>Fog O' War</h1>
    <h3>Fight against your enviroment!</h3>
    <p>Explore your enviroment to clear the fog from your map, once you clear the board you win!</p>

<form class="login-stuff">

<label for="user" class="label-user">Username: </label><input type="text" placeholder="test" value="Username"></input>
<label for="password" class="label-pass">Password: </label><input type="password" value="Password"></input>
<input onclick="hide();" type=button value="Login" class="login-button">

</form>

<ul class="point-table"> 


    </ul>

    <div id="div"></div>
    <form>
      <input onclick="toggleOverlay(boundmap);" type=button value="Hide Overlay">

    </form>

    <div class="test"></div>
    <div class="footnotes">Copyright Fog O' War <span>Created by Jamie Pates</div> 

  </div>

  <script type="text/javascript">

  var username = "Jamlie"; 





  function initialize() {     

    setWidth();

    var styles = [
    {
      stylers: [
//{hue: "#000000"},

]
},{
  featureType: "road",
  elementType: "geometry",
  stylers: [
  { lightness: 0 },
  { visibility: "simplified" }
  ]
},{
  featureType: "poi",
  elementType: "labels",
  stylers: [
  { visibility: "off" }
  ]
}
]
; 

myOptions = {
  center: new google.maps.LatLng(startingLat-0.00047213146262237, startingLong+0.0028358607292178),
  zoom: 18,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: styles,
  draggable: false,
  maxZoom: 18,
  minZoom: 18,
  scaleControl: false,
  panControl: false,
  streetViewControl: false,
  zoomControl: false,
  mapTypeControl: false
};

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

function getCoords(){
  $.get("query.php", function(data){
    ;
    newArrCoords = $.parseJSON(data);
    if(newArrCoords.length != arrCoords.length){


      arrCoords = newArrCoords;

      for(i=0; i<12; i++){

        var imageBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(MainLatSW[i],MainLongSW[i]), 
          new google.maps.LatLng(MainLatNE[i],MainLongNE[i]));

        var r =+Math.floor(Math.random() * 3) + 1;


        mainGrid[i] = new google.maps.GroundOverlay(
          "images/testfog"+r+".png",imageBounds);

        mainGrid[i].setMap(map);

      }

      for(j=0; j<9; j++){

        var imageBounds2 = new google.maps.LatLngBounds(
          new google.maps.LatLng(SecLatSW[j],SecLongSW[j]), 
          new google.maps.LatLng(SecLatNE[j],SecLongNE[j]));

        var r =+Math.floor(Math.random() * 3) + 1;


        secGrid[j] = new google.maps.GroundOverlay(
          "images/testfog"+r+".png",imageBounds2);

        secGrid[j].setMap(map);

      }

      var coordsIndex = arrCoords.length;

      $.each(arrCoords, function (key, value){


        for(i=0; i<13; i++){
         if((value['Latitude']> MainLatSW[i]) && (value['Latitude']< MainLatNE[i]) && (value['Longitude']> MainLongSW[i]) && (value['Longitude']< MainLongNE[i])){

          if(username == value['UserName']){
            mainGrid[i].setMap(null);
          }

          mainCapture[i] = value['UserName'];


        }
      }

      for(j=0; j<7; j++){
        if((value['Latitude']> SecLatSW[j]) && (value['Latitude']< SecLatNE[j]) && (value['Longitude']> SecLongSW[j]) && (value['Longitude']< SecLongNE[j])){
          if(username == value['UserName']){
            secGrid[j].setMap(null);
          }
          secCapture[j] = value['UserName'];

        } 

      }
      coordsIndex--;
      if(coordsIndex==0){
        var children = mainCapture.concat(secCapture);
        populate(children);

      }


    });

      imageBounds3 = new google.maps.LatLngBounds(


        new google.maps.LatLng(startingLat -0.0013700348119485, startingLong+ 0.00070032665252739), 
        new google.maps.LatLng(startingLat-0.0013700348119485+0.0018310528581296 , startingLong+ 0.00070032665252739+0.0042488227844242));

      boundmap = new google.maps.GroundOverlay(
        "images/boundary.png",imageBounds3
        );
      boundmap.setMap(map);

    }
  });
}


window.setInterval(function(){
  getCoords();
  $('#bob').html(arrCoords);
},1000);

}




</script>
</body >
</html>

Upvotes: 1

Answers (1)

Dr.Molle

Reputation: 117324

It's new to me that navigator.geolocation requires a specific DOCTYPE .

However, it's more a CSS issue. Add this to your stylesheet:

html, body{height:100%;}

Upvotes: 1

Google Maps API and HTML 5

Answers (1)

Related Questions