Google Maps Javascript API v3 Map Label and Polygons

Question

I am using the Google Maps javascript API v3 with a project, and I am currently having troubles getting the maplabels to appear above the polygons. I know that the polygons are z-indexed with respect to only themselves (Not able to use the z-index of a maplabel to place the maplabel above it). I was wondering if there was some hack to get around this issue. I am also using the info Window library for the api, and I need the labels to appear above the polygons, but below the info window.

Solution 1

NOTE: Fusion Tables was shut down on December 3, 2019, Google Maps Javascript API version 3.37 is the last version that supported Fusion Tables

Are you trying to do something like this:

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map.html

Uses infoBox for map labels which appear on top of the FusionTablesLayer Polygon.

With a white background on the label:

http://www.geocodezip.com/geoxml3_test/v3_FusionTables_zipcode_map_whiteBg.html

code snippet:

google.load('visualization', '1', {
  'packages': ['corechart', 'table', 'geomap']
});
var map;
var labels = [];
var layer;
var tableid = 1499916;

function initialize() {
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(37.23032838760389, -118.65234375),
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer(tableid);
  layer.setQuery("SELECT 'geometry' FROM " + tableid);
  layer.setMap(map);

  codeAddress();

  google.maps.event.addListener(map, "bounds_changed", function() {
    displayZips();
  });
  google.maps.event.addListener(map, "zoom_changed", function() {
    if (map.getZoom() < 11) {
      for (var i = 0; i < labels.length; i++) {
        labels[i].setMap(null);
      }
    }
  });
}

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
      if (results[0].geometry.viewport)
        map.fitBounds(results[0].geometry.viewport);
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

function displayZips() {
  //set the query using the current bounds
  var queryStr = "SELECT geometry, ZIP, latitude, longitude FROM " + tableid + " WHERE ST_INTERSECTS(geometry, RECTANGLE(LATLNG" + map.getBounds().getSouthWest() + ",LATLNG" + map.getBounds().getNorthEast() + "))";
  var queryText = encodeURIComponent(queryStr);
  var query = new google.visualization.Query('https://www.google.com/fusiontables/gvizdata?tq=' + queryText);

  //set the callback function
  query.send(displayZipText);

}


var infowindow = new google.maps.InfoWindow();

function displayZipText(response) {
  if (!response) {
    alert('no response');
    return;
  }
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  if (map.getZoom() < 11) return;
  FTresponse = response;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();
  for (i = 0; i < numRows; i++) {
    var zip = response.getDataTable().getValue(i, 1);
    var zipStr = zip.toString()
    while (zipStr.length < 5) {
      zipStr = '0' + zipStr;
    }
    var point = new google.maps.LatLng(
      parseFloat(response.getDataTable().getValue(i, 2)),
      parseFloat(response.getDataTable().getValue(i, 3)));
    // bounds.extend(point);
    labels.push(new InfoBox({
      content: zipStr,
      boxStyle: {
        border: "1px solid black",
        textAlign: "center",
        backgroundColor: "white",
        fontSize: "8pt",
        width: "50px"
      },
      disableAutoPan: true,
      pixelOffset: new google.maps.Size(-25, 0),
      position: point,
      closeBoxURL: "",
      isHidden: false,
      enableEventPropagation: true
    }));
    labels[labels.length - 1].open(map);
  }
}

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

#map_canvas {
  width: 610px;
  height: 400px;
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/googlemaps/v3-utility-library/07f15d84/infobox/src/infobox.js"></script>
<script type="text/javascript" src=https://cdn.rawgit.com/geocodezip/geoxml3/f43a77ca/polys/geoxml3.js"></script>
<span class="style51"><span class="style49">Show</span>:</span>
<input id="address" type="text" value="07646"></input>
<input id="geocode" type="button" onclick="codeAddress();" value="Geocode" />
<div id="map_canvas"></div>

Solution 2

This is probably a late find.. but hope someone would find this useful.

If you don't want to use infoBox (geocodezip's Solution) instead of a label, and want to give a custom zIndex.. Edit the maplabel.js.

Add the following line just before the end of MapLabel.prototype.onAdd = function() {

if (canvas.parentNode != null) {
    canvas.parentNode.style.zIndex = style.zIndex;
}

Now you can pass zIndex while creating a maplabel:

var mapLabel = new MapLabel({
    text: "abc",
    position: center,
    map: map,
    fontSize: 8,
    align: 'left',
    zIndex: 15
});

Solution 3

In maplabel.js change:

mapPane.appendChild(canvas);

to

overlayLayer.appendChild(canvas);

The mapPanes are described here.

Then set xIndex in the mapLabelOptions to bring the label in front of polygons.