[GIS] Text Label GeoJSON Markers Google Maps API

Question

I am trying to create a Text Label, for each of the markers created from my GeoJSON with the following code…

function init() {
  var mapCanvas = document.getElementById('myMap');
  var map;
  var image = "http://maps.google.com/mapfiles/ms/micons/blue.png";

  var userCenter = new google.maps.LatLng(-29.789615, 30.822422);
  var mapOptions = {
    draggable: true,
    zoomControl: true,
    scrollwheel: true,
    disableDoubleClickZoom: false,
    zoom: 18,
    center: userCenter
  };

  map = new google.maps.Map(mapCanvas, mapOptions);

  var customLayer = new google.maps.Data();

  map.data.addGeoJson(jsonData);
  map.data.setStyle({
    title: '#',
    icon: image,
    map: map,
  });

  map.data.forEach(function(feature) {
    var point = new google.maps.LatLng(feature.getProperty('coordinates'))
    var name = feature.getProperty('GPSLogs_ro')
    var mark = new google.maps.Marker({
      position: point,
      title: '#',
      icon: image,
      map: map,
      draggable: false,
    });
  });
  // customLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', init);
var jsonData = { //only showing one point from json to save space
  "type": "FeatureCollection",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
  "features": [
   { "type": "Feature", 
     "properties": { "gpslogid": 106, 
                     "createddat":   "2015\/07\/02 13:37:40.000", 
                     "lat": -29.788272, "lon": 30.823182, 
                     "GPSLogs_st": "2015\/07\/02 13:36:49.000", 
                     "GPSLogs_ro": "IMPANGELE", 
                     "GPSLogs_is": "False\r", 
                     "id": 622, 
                     "xmin": 30.821820, "xmax": 30.821920, 
                     "ymin": -29.789654, "ymax": -29.789554 },
     "geometry": { "type": "Point", 
                   "coordinates": [   30.821919004535157, -29.789652962174948 ] } }
  ]
}

This code is adapted from https://stackoverflow.com/questions/32893734/google-maps-javascript-v3-21-trouble-displaying-geojson-features,

Now that I have my markers adding to the map, I want to assign them a Text Box type label, containing the var name = feature.getProperty('GPSLogs_ro') content.

The closest thing I have found is https://stackoverflow.com/questions/3953922/is-it-possible-to-write-custom-text-on-google-maps-api-v3 however I try to apply it, and no labels appear, just the markers, I am sure I am doing it wrong!

Answer 1

Okay so considering I have access to ArcMap, and this is a GIS forum, I found a temporary work around, its not ideal, but right now it puts labels on my map:

• I open the shapefile in ArcMap
• I Label the features (Obviously editing the label properties to my desire)
• I find a text size and zoom level that displays all of my labels effectively( no bunching, all labels visible ect)
• I create an Annotation Feature class for the labels at that Zoom level.
• I convert the Annotation class to a KML, I export it as having a high resolution, (5000).

• I add that KML to my Google maps as a KML Layer

  ctaLayer = new google.maps.KmlLayer({

  url: 'https://GISJohnECS.github.io/TestLabelZ1.kmz',

  zIndex: 0,

  preserveViewport: true,

  map: map });

• That gives me labels, BUT I am still working on the zIndex, as the KML is trying to display under my GeoJSON constantly, that defeats the purpose of the label! I will work on a more effective method to answer my question, and will edit and update this answer until I can either figure out a way to do it with Google Maps API v3 or solve my zIndex issue!