multiple rectangles in Google Maps from SQL database

Question

I am trying to create multiple rectangles with info windows on a Google Map. I have followed the pattern used for multiple markers found at Generating Google Maps markers From Database I first used that example and used one of the lat and one of long to display icons on the map. That worked. Then I change the code to rectangles and added bounds. But no rectangles appear on the map. I tried to hard code one of the rectangles on the map and one rectangle appeared.

I also made sure that the description to be used in the infowindow did not have any links in. I found that to be a problem if I was passing a link in the data variable. But I could get the link to work if I add the variable with a link at the point of the creation of the infowindow content.

  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">
    var markers = [
  <asp:Repeater ID="rptMarkers" runat="server">
  <ItemTemplate>
           {                    
               "title": '<%# Eval("Quad_Name") %>',
               "north": '<%# Eval("poly_north") %>',
               "east": '<%# Eval("poly_east") %>',
               "south": '<%# Eval("poly_south") %>',
               "west": '<%# Eval("poly_west") %>',
               "description": '<%# Eval("smqcomment")  %>'
           }
</ItemTemplate>
<SeparatorTemplate>
    ,
</SeparatorTemplate>
</asp:Repeater>
  ];


  window.onload = function () {
      var mapOptions = {
          center: new google.maps.LatLng(41.78768535298007, -99.96481875),
          zoom: 7,
          mapTypeId: google.maps.MapTypeId.HYBRID
      };

      var infoWindow = new google.maps.InfoWindow();
      var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);



      for (i = 0; i < markers.length; i++) {
          var data = markers[i]

          var rectangle = new google.maps.Rectangle({
              strokeColor: '#FF0000',
              strokeOpacity: 0.8,
              strokeWeight: 2, 
              map: map,
              bounds: {
                  north: data.north,
                  south: data.south,
                  east: data.east,                      
                  west: data.west
              }
          });

          (function (rectangle,data) {
              google.maps.event.addListener(rectangle, "click", function (e) {
                  infoWindow.setContent(data.description);
                  infoWindow.open(map,rectangle);
              });
          })(rectangle,data);             
      }
  }
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<div id="dvMap" style="width: 960px; height: 532px"></div> 

Any help would be great thanks.

Answer 1

I get a javasript error on your live page: js:31 InvalidValueError: setBounds: not a LatLngBounds or LatLngBoundsLiteral: in property south: not a number. You need to translate the strings in your JSON into numbers before using them to construct google.maps.Rectangle objects.

To open an infowindow on a rectangle, you need to set the position of the infowindow. The syntax infoWindow.open(map, rectangle) doesn't apply to rectangles, that only applies to markers (at least for API objects), see the documentation for more information.

• position contains the LatLng at which this info window is anchored. Note: An InfoWindow may be attached either to a Marker object (in which case its position is based on the marker's location) or on the map itself at a specified LatLng. Opening an info window on a marker will automatically update the position.

(function(rectangle, data) {
  google.maps.event.addListener(rectangle, "click", function(e) {
    infoWindow.setContent(data.description);
    infoWindow.setPosition(rectangle.getBounds().getCenter());
    infoWindow.open(map);
  });
})(rectangle, data);

code snippet:

window.onload = function() {
  var mapOptions = {
    center: new google.maps.LatLng(41.492537, -99.901813),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };

  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);


  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < markers.length; i++) {
    var data = markers[i]

    var rectangle = new google.maps.Rectangle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      map: map,
      bounds: {
        north: parseFloat(data.north),
        south: parseFloat(data.south),
        east: parseFloat(data.east),
        west: parseFloat(data.west)
      }
    });

    (function(rectangle, data) {
      google.maps.event.addListener(rectangle, "click", function(e) {
        infoWindow.setContent(data.description);
        infoWindow.setPosition(rectangle.getBounds().getCenter());
        infoWindow.open(map);
      });
    })(rectangle, data);
  }
}
var markers = [

  {
    "title": 'Andrews',
    "north": '42.75001',
    "east": '-103.625',
    "south": '42.62501',
    "west": '-103.75',
    "description": 'Andrews description',
  }

  ,

  {
    "title": 'Arlington',
    "north": '41.50001',
    "east": '-96.25001',
    "south": '41.37501',
    "west": '-96.37501',
    "description": '<img src="http://snr.unl.edu/csd-esic/download/geologysoils/digitalgeologicmapscleaned/Arlington/Arlington_Quad.jpg" height="400">',
  }

  ,

  {
    "title": 'Ashland East',
    "north": '41.12501',
    "east": '-96.25001',
    "south": '41.00001',
    "west": '-96.37501',
    "description": '<img src="http://snr.unl.edu/csd-esic/download/geologysoils/digitalgeologicmapscleaned/Ashland_East/Ashland_East_Quad.jpg" height="400"">',
  }

  ,

  {
    "title": 'Beaver Wall',
    "north": '43.00001',
    "east": '-102.625',
    "south": '42.87501',
    "west": '-102.75',
    "description": 'Beaver Wall description',
  }

];

html,
body,
#dvMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="dvMap"></div>

Answer 2

I see that geocodezip updated the code in their original answer to the question. Two things are new

First the defining of the bounds applied the function of parseFloat() to each of the coordinates. I am not sure that was necessary since I have been able to get icons or polygons to draw with the coordinates without this function.

I think what really solved the problem was adding the line of code

var bounds = new google.maps.LatLngBounds(); 

I am not actually sure what this is doing beside defining the variable "bounds" but it seems to have solved my problem.

Thanks geocodezip!