Question

First I’m pretty new to Javascript, so sorry if my question comes across poorly.

I’m creating an application in Flash to help users calculate their electrical costs. Then I’m taking this figure and write it to an xml file.

Now I’m looking to open a webpage and show a google map, and there is a rectangle drawn over the map which is generated dynamically from the number generated earlier and stored in the xml file.

I’m completely lost as to places to turn on how to achieve this. I’ve gotten my map on to my page, and it scales 100% as I want it to, but I can’t figure out the dynamic rectangle part at all. Any ideas or pointers in the right direction greatly appreciated.

Answer 1

In this latest version, the XML file

<countries>
  <country name="USA" lat="40.0" lng="-100.0" width="30.0"/>
  <country name="France" lat="46.6" lng="2.7" width="10"/>
  <country name="Germany" lat="51.1" lng="10.1" width="20"/>
</countries>

is loaded as soon as the map tiles finish loading. I could not get the getProjection to be called correctly if I did not wait for tile loading to finish. The docs state that getting the projection needs the map to be initialized, and recommends listening for projection_changed. Both ways work yet I still feel listening to tiles_loaded is safer and if something goes wrong with the xml loading it will get called again if the map is zoomed or panned a noticeable amount.

  var map;
  var xmlLoaded = false;

  function initialize() {
    var mapOptions = { center: new google.maps.LatLng(30.0, 0.0), zoom: 2,
      mapTypeId: google.maps.MapTypeId.ROADMAP };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    google.maps.event.addListener(map, 'tilesloaded', loadData);
  }

  function loadData() {
    if(!xmlLoaded) {
     $.ajax({
      type: "GET",
      url: "co2data.xml",
      dataType: "xml",
      success: function(xml) {
        var countries = xml.documentElement.getElementsByTagName("country");
        for(var i = 0, country; country = countries[i]; i++) {
          var name = country.getAttribute("name");

          var lat = parseFloat(country.getAttribute("lat"));
          var lng = parseFloat(country.getAttribute("lng"));
          var point = map.getProjection().fromLatLngToPoint(new google.maps.LatLng(lat,lng));

          // width is really an arbitrary unit, relative to CO2 tonnage.
          // equals the side of the drawn square.
          // it is measured in google maps points units.
          var width = parseFloat(country.getAttribute("width"));

          makeCO2Rect(name, point, width);
        }
        xmlLoaded = true;
      }
     });
    }
  }

The rectangle is defined by width in points (the whole world is 256×256 points), so some conversion is needed when assigning their centers to the more conventional LatLng.

  function rectParamsToBounds(point, width) {
    var ctrX = point.x;
    var ctrY = point.y;

    var swX = ctrX - (width/2);
    var swY = ctrY - (width/2);

    var neX = ctrX + (width/2);
    var neY = ctrY + (width/2);
    return new google.maps.LatLngBounds(
        map.getProjection().fromPointToLatLng(new google.maps.Point(swX, swY)),
        map.getProjection().fromPointToLatLng(new google.maps.Point(neX, neY)));
  }

Finally, a rectangle is created with a country name that goes into a MarkerWithLabel (using v1.1.5 here, you can hotlink to http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js though I prefer saving a local copy)

Since dragging a rectangle appears impossible, a marker in its center works as a handle. When it’s dragged, the associated rectangle moves with it.

  function makeCO2Rect(name, point, width) {
    var rect = new google.maps.Rectangle({
      map: map,
      bounds: rectParamsToBounds(point, width)
    });

    var marker = new MarkerWithLabel({
      map: map,
      position: map.getProjection().fromPointToLatLng(new google.maps.Point(point.x, point.y)),
      draggable: true,
      raiseOnDrag: false,
      labelContent: name,
      labelAnchor: new google.maps.Point(30, 0),
      labelClass: "labels", // the CSS class for the label
      labelStyle: {opacity: 1.0}
    });

    google.maps.event.addListener(marker, 'drag', function(event) {
      var newLatLng = event.latLng;
      var newPoint = map.getProjection().fromLatLngToPoint(newLatLng);
      rect.setBounds(rectParamsToBounds(newPoint, width));
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);

Styling the labels need to be done both in the .labels CSS class and the constructor, and rectangles have options like stroke color, thickness, opacity, and fill color.