Home/ Questions/Q 876111
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T11:22:51+00:00

I have a custom google map. It seems very simple. <!DOCTYPE html PUBLIC -//W3C//DTD

  • 0

I have a custom google map. It seems very simple. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>

  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

  <!--google magic-->
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

  <!--custom map-->
  <script type="text/javascript">
    function initialize() {
      var latlngcenter = new google.maps.LatLng(41.523387, -87.691545);
      //move center west of marker to show I-57
      var myOptions = { zoom: 11, center: latlngcenter, mapTypeId: google.maps.MapTypeId.ROADMAP };
      var map = new google.maps.Map(document.getElementById("GardenWalk_Canvas"), myOptions);
      var latlng;
      var marker;
      latlng = new google.maps.LatLng(41.503387, -87.636545);
      marker = new google.maps.Marker({ position: latlng, map: map });
      latlng = new google.maps.LatLng(41.520935, -87.582318);
      marker = new google.maps.Marker({ position: latlng, map: map });
      latlng = new google.maps.LatLng(41.520075, -87.634509);
      marker = new google.maps.Marker({ position: latlng, map: map });
      latlng = new google.maps.LatLng(41.538092, -87.677964);
      marker = new google.maps.Marker({ position: latlng, map: map });
      latlng = new google.maps.LatLng(41.536256, -87.678006);
      marker = new google.maps.Marker({ position: latlng, map: map });
      latlng = new google.maps.LatLng(41.533099, -87.682250);
      marker = new google.maps.Marker({ position: latlng, map: map });
      latlng = new google.maps.LatLng(41.550018, -87.691408);
      marker = new google.maps.Marker({ position: latlng, map: map });
      latlng = new google.maps.LatLng(41.550017, -87.691305);
      marker = new google.maps.Marker({ position: latlng, map: map });
      latlng = new google.maps.LatLng(41.508768, -87.693976);
      marker = new google.maps.Marker({ position: latlng, map: map });
      latlng = new google.maps.LatLng(41.509065, -87.694586);
      marker = new google.maps.Marker({ position: latlng, map: map });
      latlng = new google.maps.LatLng(41.498524, -87.810122);
      marker = new google.maps.Marker({ position: latlng, map: map });
    }
  </script>

</head>
<body onload="initialize()">
  <div id="GardenWalk_Canvas" style="width: 500; height: 350" />
  text after
</body>
</html>

The only problem is that the map only shows when the following is removed:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Any thoughts or rhyme or reason as to why?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you have some comments in the html

    //google magic
//custom map

    which are not valid xhtml.

    change it to 

    <!--google magic-->
    • 0