1

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

Jordan Smith
  • 107
  • 12
  • Is this what you are looking for? https://stackoverflow.com/questions/10446335/hide-marker-in-google-map-at-zoom-level-3 – Frank Oct 10 '20 at 03:24
  • I looked at something similar to this previously and to my understanding you can only have a single markers text open at a time which isn't exactly what I want. I was more looking to have multiple labels across the map – Jordan Smith Oct 11 '20 at 02:14
  • For text open do you mean google infowindow? If so you can open multiple infowindow: https://jsfiddle.net/kjqfs0bo/ – Frank Oct 11 '20 at 03:31
  • Yes talking about infowindow, but even with the multiple infowindows open this still in the context on my app ins't exactly what I am looking for. I am really hoping for more of must a label on location absent of a marker (also not a hidden marker) – Jordan Smith Oct 11 '20 at 12:04
  • 1
    If you don't want invisible markers with text only, maybe try geojson layer. – Frank Oct 11 '20 at 18:12
  • Not a bad option, is there a simple way to create words other than polygons? – Jordan Smith Oct 12 '20 at 08:40
  • I think geojson supports point,line,polygon only, you may need to find another way to display text only. I haven't done that before so can't help sorry. – Frank Oct 14 '20 at 01:39
  • all good, can you please post this geojson as an answer so I can give you credit for this please – Jordan Smith Oct 14 '20 at 23:45

2 Answers2

2

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.

Ramy Ibrahim
  • 656
  • 4
  • 19
1

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.

Frank
  • 1,215
  • 12
  • 24