Forum Academy Marketplace Showcase Pricing Features

Google map with custom marker and numbered label

Hey everyone!

I figured out a way to use custom marker icon and numbered labels in Google maps.
Here’s the code snippet. Add a HTML element on the page , copy paste this code and customize as per your requirements and run it in an iFrame.

<div id="map"></div>

<style>
#map {
  height: 500px;
}
</style>

<script src="//maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxx"></script>

<script>

function loadMap() {

const lats = ['Search for Contacts Historys:each item's Contact:filtered's Address Geo's latitude join with ',''];
const longs = ['Search for Contacts Historys:each item's Contact:filtered's Address Geo's longitude join with ',''];
const labels = ['Search for Contacts Historys:each item's Contact:filtered's City join with ',''];

  let mapOptions = {
    center: new google.maps.LatLng(Search for Contacts Historys:each item's Contact:filtered's Address Geo's latitude:first item, Search for Contacts Historys:each item's Contact:filtered's Address Geo's longitude:first item),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  const icon = {
    url: "//gifimage.net/wp-content/uploads/2018/04/loading-circle-gif-11.gif",
    scaledSize: new google.maps.Size(60, 35), 
    origin: new google.maps.Point(0,0), 
    anchor: new google.maps.Point(23, 47)
};
  this.map = new google.maps.Map(document.getElementById('map'), mapOptions); 
  var infowindow = new google.maps.InfoWindow();

  var marker, i,j;

  for (i = 0; i < Search for Contacts Historys:each item's Contact:filtered:count; i++) {
j = i+1;
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lats[i], longs[i]),
      map: this.map,
icon: icon,
label: {
         text:  ''+j,
         color: "#000"
   }
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(labels[i]);
        infowindow.open(Map, marker);
      }
    })(marker, i));
  }
}

loadMap();
</script>

Const lats is where you insert all your latitudes
Const longs is where you insert all your longitudes
Const labels is for labels
If you have data items in a numbered order, you may need to use another array to store those numbers and display. In the above code, I’m just using the value of iterator “i” as label number in my map.
You can use any marker by replacing the value of “url” under “const icon” and customize its size by changing W and H in “scaledSize”
and finally, you can change the color of label under “label”.

I hope this helps someone :smiley:

1 Like

do i keep the single apostrophe and comma within the array brackets?

Yes you should. Array should look like this
[’ your search query join with ', ’ ']

1 Like

thank you

Google maps extended can do this.

Google Maps Extended Plugin - Bubble Google Maps Extended Plugin | Bubble

Label support is dropping very soon along with a new documentation page

when is the drop, very interested in this