Google Maps Javascript API v3 Map Label and Polygons

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.



Are you trying to do something like this:

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

With a white background on the label:

screenshot of map

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);


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

function codeAddress() {
  var address = document.getElementById("address").value;
    'address': address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      if (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('' + queryText);

  //set the callback function


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

function displayZipText(response) {
  if (!response) {
    alert('no response');
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  if (map.getZoom() < 11) return;
  FTresponse = response;
  //for more information on the response object, see the documentation
  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=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="></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>


In maplabel.js change:




The mapPanes are described here.

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


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) { = 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

This works:

In maplabel.js change:





Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.