Get all markers from google map for setting text label

Question

I am having trouble in setting a text label using https://github.com/googlemaps/js-map-label

Setting a label usng the library is done something like this:

//var marker = ...
var textLabel = new MapLabel({
    text: 'some text'
    position: position, //google maps LatLng position
    map: map,
    fontSize: 35,
    align: 'right'
});

textLabel.set('position', position);
marker.bindTo('map', textLabel);
marker.bindTo('position', textLabel);

I use the the addGeoJson method to import all data and i don't have access to the markers. Is there any way i could fix this?

I need to set a text for every marker displayed. Here's my current implementation:

    map.data.addGeoJson(response.data, {idPropertyName: "id"});

    map.data.setStyle(function(feature){
        var color = feature.getProperty('color');
        var zIndex = feature.getProperty('zIndex');

        if(feature.getGeometry().getType().toLowerCase() == "point"){
            return {
                icon: globalOptions.textMarkerPath
            }
        }else{
            return {
                fillColor: 'rgb(' + color + ')',
                strokeColor: 'rgb(' + color + ')',
                fillOpacity: 0.4,
                strokeOpacity: 1,
                strokeWeight: 1,
                zIndex: zIndex
            }
        }

    });

    map.data.forEach(function(feature){
        if(feature.getGeometry().getType().toLowerCase() == "point") {
            var textLabel = new MapLabel({
                text: feature.getProperty("text"),
                position: feature.position,
                map: map,
                fontSize: 35,
                align: 'right'
            });

            textLabel.set('position', feature.position);
            feature.bindTo('map', textLabel);
            feature.bindTo('position', textLabel);
            feature.setProperty('textLabel', textLabel);
        }
    });

Thanks again.

EDIT Here is an example of a geojson response (a trimmed one):

{
  "viewable": true,
  "data": {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": {
          "id": 11766,
          "text": "",
          "layer": "limitaimobil",
          "color": "35,40,50",
          "zIndex": 7,
          "area": 448,
          "is_associated": false
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [
                26.1373083033642,
                47.7787618059076
              ],
              [
                26.1371254511354,
                47.778684435143
              ],
              [
                26.1370035662918,
                47.7789188945034
              ],
              [
                26.1371962266472,
                47.779000415299
              ],
              [
                26.1373083033642,
                47.7787618059076
              ]
            ]
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "id": 12541,
          "text": "2",
          "layer": "limitaparcela",
          "color": "51,153,255",
          "zIndex": 48,
          "area": 0,
          "is_associated": false
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            26.1372642328728,
            47.7785316061887
          ]
        }
      }
    ]
  }
}

Answer 1

What you could do is that everytime you retrieve a marker you add it into a markers list, so then when you need them you can just iterate the list using the id as an identifier and apply the text label.

EDIT:

The is how I did it:

//Used to remember markers
var markerStore = {};

//Time between marker refreshes
var INTERVAL = 250;

function getMarkers() {
    $.ajax({
        type: 'GET',
        url: 'webresources/mobile/retrieve-position',
        contentType: 'application/json',
        dataType: "json", //linea fragril
        beforeSend: function (xhr) {
            // Set the CSRF Token in the header for security
            var token = window.sessionStorage.accessToken;
              if (token) {
                xhr.setRequestHeader('userToken', token);
              }
               else {
                xhr.abort();
            }
        },
        success: function (res, textStatus, jqXHR) {
            if (jqXHR.status !== 204) {
                for (var i = 0; i < res.length; i++) {
                    if (markerStore.hasOwnProperty(res[i].username)) {
                        //Check if marker is still alive
                        if(res[i].alive){

                          Destroy the marker  
                          markerStore[res[i].username].setMap(null);

                        }
                        else{
                            Change markers position reading the new marker information. 
                            markerStore[res[i].username].setPosition(new google.maps.LatLng(res[i].lat, res[i].long));
                        }
                    } 
                    else {
                        //If it doesnt exist, create a new one.
                        var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + res[i].color);
                        var marker = new google.maps.Marker({
                            position: new google.maps.LatLng(res[i].lat, res[i].long),
                            title: res[i].username,
                            icon: pinImage,
                            map: map
                        });
                        markerStore[res[i].username] = marker;
                        console.log(marker.getTitle());
                    }
                }
                window.setTimeout(getMarkers, INTERVAL);
            }
        },
        error: function () {

            console.log("Error loading markers.");
        }
    });
}

Answer 2

feature doesn't have a position property, you need to do this:

feature.getGeometry().get()

to get the google.maps.LatLng associated with the marker.

proof of concept fiddle

code snippet:

 var map; var globalOptions = {}; function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); map.data.addGeoJson(geoJSON, { idPropertyName: "id" }); map.data.setStyle(function(feature) { var color = feature.getProperty('color'); var zIndex = feature.getProperty('zIndex'); if (feature.getGeometry().getType().toLowerCase() == "point") { return { icon: globalOptions.textMarkerPath } } else { return { fillColor: 'rgb(' + color + ')', strokeColor: 'rgb(' + color + ')', fillOpacity: 0.4, strokeOpacity: 1, strokeWeight: 1, zIndex: zIndex } } }); var bounds = new google.maps.LatLngBounds(); var markerCnt = 0; map.data.forEach(function(feature) { if (feature.getGeometry().getType().toLowerCase() == "point") { bounds.extend(feature.getGeometry().get()); var textLabel = new MapLabel({ text: feature.getProperty("text"), position: feature.getGeometry().get(), map: map, fontSize: 35, align: 'right' }); markerCnt++; if (markerCnt > 1) { map.fitBounds(bounds); } else { map.setCenter(feature.getGeometry().get()); map.setZoom(6); } textLabel.set('position', feature.getGeometry().get()); feature.bindTo('map', textLabel); feature.bindTo('position', textLabel); feature.setProperty('textLabel', textLabel); } }); } google.maps.event.addDomListener(window, "load", initialize); var geoJSON = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { "id": 11766, "text": "", "layer": "limitaimobil", "color": "35,40,50", "zIndex": 7, "area": 448, "is_associated": false }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 26.1373083033642, 47.7787618059076 ], [ 26.1371254511354, 47.778684435143 ], [ 26.1370035662918, 47.7789188945034 ], [ 26.1371962266472, 47.779000415299 ], [ 26.1373083033642, 47.7787618059076 ] ] ] } }, { "type": "Feature", "properties": { "id": 12541, "text": "2", "layer": "limitaparcela", "color": "51,153,255", "zIndex": 48, "area": 0, "is_associated": false }, "geometry": { "type": "Point", "coordinates": [ 26.1372642328728, 47.7785316061887 ] } }] }; 

 html, body, #map_canvas { height: 500px; width: 500px; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel.js"></script> <div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>