GoogleMap -> Custom Selected Icon -> Change to Round?

I am using the vanilla bubble Google Maps.

Would there be a way with CSS to change the standard shape of an image used as a Custom Selected Icon? I would like it to be round.

I know I could save a cropped version for this use, but wanting to avoid it.

Thanks in advance!

I recently implemented google maps with custom markers. The standard Maps, or Maps Extended did not have sufficient customization for my needs, so I went with a Javascript implementation.
I highly recommend you do the same if you are familiar with the language or you can follow the guide below.

Implementation Guide
CSS Solution for Rounding

Quick Guide:

  • Make Sure ID attributes are enabled. (Settings > General > Expose ID attr.)
  • Place a Group element on the page, set ID to

map

  • Place HTML element with this code on the page

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR API KEY]&v=weekly"></script>

  • Workflow > Page load > Add Run Javascript Action

function initMap() {
const map = new google.maps.Map(document.getElementById(“map”), {
zoom: 8,
center: new google.maps.LatLng(Current User’s location’s latitude,Current User’s location’s longitude),
});

const markers = ;
// Generate as many markers as needed and push them to markers
var new_marker = new google.maps.Marker({
id: ‘Current User’s Slug’ + “_marker”,
url: “Website home URLprofile/Current User’s Slug”,
position: new google.maps.LatLng(Current User’s location’s latitude,Current User’s location’s longitude),
label: null,
icon: {
url: “Current User’s profile_picture’s URL”,
scaledSize: new google.maps.Size(50,50),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(0, 0),
},
optimized: false
});

markers.push(new_marker);

var myoverlay = new google.maps.OverlayView();
myoverlay.draw = function () {
this.getPanes().markerLayer.id=‘markerLayer’;
};
myoverlay.setMap(map);

// URL redirect on click to Profile page
new_marker.addListener(‘click’, function () {
window.location.href = this.url;
});

// Add Clustering
new MarkerClusterer(map, markers, {
imagePath:“https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”,
});
}

initMap();

  • Add another HTML element on the page with this code

<style>
#markerLayer img {
border-radius: 50px;
}
</style>

Hi @chiprana Thank you for the considerable effort you went to in sharing this with me…I was hoping for a solution just to use the Bubble/Google map…I am kind of interested in how far I can take vanilla Bubble with perhaps just a few CSS tricks rather than full-on CSS which I have no training on :grinning:

I did follow the link to rounding but I think I don’t have the understanding to extrapolate from that only what I need to alter the vanilla bubble with just a snippet of the CSS…

Hopefully someone else can help…but a big thanks again to you for sharing your considerable knowledge…

No worries, it was really no trouble at all.

As far as I understand, you will not be able to address the markers with the vanilla implementation. Even if you try to address them with CSS via img[src=‘image_url’]{} or manage to give them an ID (which I think is only available in Maps Extended) they won’t show up in the HTML of the Map element. In order to be able to access them, you have to create a Marker Layer. And in order to do that, you have to do a custom implementation of Maps.

PS. I’m surprised how far one can take Bubble with no-code development, however you will definitely bump into things where a no-code solution is either not possible or is so ridiculous that you’d rather write your own code.

1 Like

Ah yes…in the end it was easy to just create a map avatar sized and round…looks great…and works within the bounds :koala:

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.