CODEWITHSUNDEEP
mapspngoverlay
Earthstation - Brian
Earthstation - Brian

Reputation: 163

Google Map v3 Ground Overlay?

I have spent two days puzzling this and failed. Any assistance will be greatly appreciated.

I need a map centered on -18.975750, 32.669184 in a canvas of 1500px x 900px. I then to need to overlay coverage PNGs (obtained form www.heywhatsthat.com) with set code- transparency.

I have eventually arrived at the following code and it fails. I would like to add more than one PNG bound by it's co-ords, but cant even get one to work.

 <script src="http://maps.google.com/maps?file=api&amp;v=3&amp;key=AIzaSyAGbZjXr2wr7dT2P3O5pNo5wvVF3JiaopU&sensor=false"
        type="text/javascript"></script>
<script type="text/javascript">

function initialize() {
  if (GBrowserIsCompatible()) {
    var map = new google.maps.MAP(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(-18.975750, 32.669184), 13);
    map.setUIToDefault();

  var imageBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-19.000417,30.999583),
  new google.maps.LatLng(-17.999583,32.000417));

   var oldmap = new google.maps.GroundOverlay(
  "http://www.earthstation.mobi/cloakpS19E031.png",imageBounds);
   oldmap.setMap(map);
}

</script>
</head>
 <body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 1500px; height: 900px"></div>
 </body>
 </html>

What am I mssing and please point me in the right direction add multiple png overlays with transparency in the options.

Thanks Brian Zimbabwe

Upvotes: 0

Views: 2687

Answers (1)

andresf
andresf

Reputation: 2061

You have a lot of issues with your code. It looks like you're trying to migrate from V2 to V3, and you still have V2 methods and objects in your code. You're also not loading the JS APi correctly when you call in the of your HTML.

Here is functional code that displays the overlay using the V3 API, but it looks like the original center coordinates that you used do not place the map at the center of the overlay (you'll need to figure that out yourself). I've added comments where relevant so that you can see where you went astray. Note the call to the API library in the first script tag.

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAGbZjXr2wr7dT2P3O5pNo5wvVF3JiaopU&sensor=false"
          type="text/javascript"></script>
  <script type="text/javascript">

  function initialize() {
    //You don't need to use GBrowserIsCompatible, it's only for V2 of the API
    //if (GBrowserIsCompatible()) {
      //You need to set up options for the map that you reference when you
      //instantiate the map object
      var myOptions = {
                center: new google.maps.LatLng(-18.975750, 32.669184),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              };
      //Your code references google.maps.MAP; it's google.maps.Map
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      var imageBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(-19.000417,30.999583),
        new google.maps.LatLng(-17.999583,32.000417));

      var oldmap = new google.maps.GroundOverlay(
        "http://www.earthstation.mobi/cloakpS19E031.png",imageBounds);
        oldmap.setMap(map);
   //} <--Your code was missing this closing bracket for the conditional
       //But the conditional is not even needed, since GBrowserCompatible is a V2 thing
  }

  </script>
  </head>
   <body onload="initialize()">
  <div id="map_canvas" style="width: 1500px; height: 900px"></div>
   </body>
   </html>

Upvotes: 1

Related Questions