CODEWITHSUNDEEP
google-mapsgoogle-maps-android-api-2
Jordan Smith
Jordan Smith

Reputation: 117

Labelling on Google Maps SDK For Android

I am wanting to put my own custom label over certain places on a map, take for example the image below where there is text for Albert Park Lake which is not associated with a place marker. This is an example of what I am wanting to do as I am designing an app that has a number of regions and I wanting to put the names of those regions on the map which will only be visible at certain zoom levels as to ensure there is no clutter when being viewed by the user. I had experimented with place markers but found that the text being on top of the marker was bad look and I would have had to write a function to adjust the text visibility for the zoom level to deal with the clutter of many being on the screen at once.

Cheers Jordan Smith

enter image description here

Upvotes: 2

Views: 680

Answers (2)

Ramy Ibrahim
Ramy Ibrahim

Reputation: 711

I suggest to convert the text you want to set to bitmap image and set this bitmap as custom marker, you may find this question useful if you want to know how to convert text to bitmap.

Upvotes: 2

Frank
Frank

Reputation: 1285

Here are a few things you could try:

1. Pop up multiple infowindows: https://jsfiddle.net/kjqfs0bo/

function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString ="lalala";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
  });
  const infowindow2 = new google.maps.InfoWindow({
    content: contentString,
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });
  const marker2 = new google.maps.Marker({
    position: { lat: -20.363, lng: 130.044 },
    map,
    title: "Uluru (Ayers Rock)",
  });
    infowindow.open(map, marker);
    infowindow2.open(map, marker2);
}

2. Invisible markers with text label: https://jsfiddle.net/0koynbz2/1/

function createMarker() {
  var canvas, context;
  canvas = document.createElement("canvas");
  return canvas.toDataURL();
}

var map = new google.maps.Map(document.getElementById("map_canvas"), {
  zoom: 13,
  center: new google.maps.LatLng(56.1304, -106.3468),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(56.1304, -106.3468),
  map: map,
  icon: {
    url: createMarker()
  },
  label: {
    text: 'My Place',
    color: '#000',
    fontSize: '14px',
    fontWeight: 'bold'
  }
});
var marker2 = new google.maps.Marker({
  position: new google.maps.LatLng(56.1204, -106.3468),
  map: map,
  icon: {
    url: createMarker()
  },
  label: {
    text: 'My Place2',
    color: '#000',
    fontSize: '14px',
    fontWeight: 'bold'
  }
});

3. Maybe try geojson, but since geojson only supports point, line and polygon. I'm not sure if there is a way to display text only.

Upvotes: 1

Related Questions