3

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!

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! As you can see my KML labels are under the GEOJSON, if anyone can help with this, I will have my solution! 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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy