[Google Maps] How to get Marker in javascript to add to Cluster Marker [Google Maps]

[Google Maps] How to get Marker in javascript to add to Cluster Marker [Google Maps]

  
Forge Component
(18)
Published on 24 Apr by OutSystems Labs
18 votes
Published on 24 Apr by OutSystems Labs

Good day to you!


Question: I want to implement a clustermarker on my Google map (on mobile, native), and I add my markers in the following, Outsystems-y way:



I read Carlos' post about following the example on this page, but you need to add the markers in javascript. My question would be, how do I get the array of markers in JS that I made with the method pictured above, since you can only pass text parameters to a script.


Thanks for reading, and thanks even more if you were to reply!


Lars

Solution

Hi Lars,

I implemented this feature a while ago so, let's see if it still works.

1. You need to get the MarkerClusterer script and require it on your page/block, like the following:


Then you'll need a handler for the MapInitialized event that is fired by the GoogleMapsMobile (Where gonna need the MapId).

Finally, you add a JavascriptNode on the flow where you pass the MapId as an Input parameter. Inside the javascript node, i had the following:


PS: Just copying the code here for easy reading:

var map = osGoogleMap.getMap($parameters.MapId).gMap;

var osMarkers = osGoogleMap.getMap($parameters.MapId).markers;

var markers = [];

var clusterStyles = [];

for (var key in osMarkers) {
   
    var obj = osMarkers[key];
    markers.push(obj.gMarker);
   
    clusterStyles.push({
        backgroundPosition: 'center center',
        backgroundSize: 'cover',
        textColor: 'white',
        url: 'YOUR CLUSTER ICON URL',
        height: 30,
        width: 30
    });
}

var mcOptions = {
    styles: clusterStyles
};

// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, mcOptions);


I'm not sure if it still works, but i guess it should.

Let me know if it worked.

Cheers


Solution

Henrique Batista wrote:

Let me know if it worked.

Cheers

Hi Henrique, 


First of all let me thank you for supplying a great answer! 

I think the framework has been redone a little bit, as I had to change the code to get the map and markers to:

var map = osGoogleMap.OSMaps[ $parameters.MapId ].gMap;
var osMarkers = osGoogleMap.OSMaps[ $parameters.MapId ].markers



My results are varying, I must say. I also put a delay of a second before I initialize the markerclusterer but that's a different issue all together.


Outsystems browser preview: 


Android Outsystems Now:


Android native:



iPhone:

Can't test because our wifi is temporarily down, but where images are still not loading on android, they are on iPhone. Strange thing is that now, the clustermarker icon does not load, even in the browser preview, where images have always worked (and yes I replaced the 'your icon url here' haha)

Hey, no problem, happy to help.

I'm glad that you got it working. About the images you have some considerations (i'm just saying some topics that i remember to be painful at the time :p)

  • You need to assure that the icon is accessible through https - i have the following
     url: 'https://<my-server>/<my-app>/img/<my-app>.orangecircle.png'
  • I remember also that i had an issue with CSS, i think it's worthwhile to give it a try on chrome tools to see if the image is there but with incorrect css,size or similar
  • I'm not sure if there's limitations on gmaps side (i.e gifs )

Let me know if it worked, otherwise i'll get back to the code to get an running example.


There I go again.. I have the tendency to upload any resource on our company server instead of using the image resource folder. Strange thing happens when I zoom in and out: the markers are wiped from the map. 


Did you have the same error in your implementation?

Strange behavior, it should drill down and divide the clusters on more clusters.

I never had that behavior. 

I'll try to rebuild my code and give you an example, not sure if I can do it today though

Henrique Batista wrote:

Strange behavior, it should drill down and divide the clusters on more clusters.

I never had that behavior. 

I'll try to rebuild my code and give you an example, not sure if I can do it today though

Nothing to worry friend, a quick google search showed me that I had to specify a maxZoom.

It works now, all is good!

I had to use the setMaxZoom() method after initializing the markercluster, because specifying the maxzoom in the marcerClusterOptions did not seem to work. 


Cool, didn't know about it.

Glad it worked :)

Lars De Pauw, How and where did you call setMaxZoom? I implemented MarkerCluster like Henrique Batista posted but it nothing changed?

Matthias Preuter wrote:

Lars De Pauw, How and where did you call setMaxZoom? I implemented MarkerCluster like Henrique Batista posted but it nothing changed?

Strange stuff right here, I've taken away the setMaxZoom to see if it would fail, but it still worked, so I'm not sure if it was the setMaxZoom or something else that suddenly solved it for me.


Anyways, I've done it like this:

(you can open the image in a new tab and it will download in full res)


After initializing my markerClusterer, I've set the maxzoom not in the options when declaring it, because that did not work, but right after, which did work:


var markerCluster = new MarkerClusterer(map, markers, mcOptions);
markerCluster.setMaxZoom(8);


Best of luck, neighbour from the North!

@Lars De Pauw Top! het werkt nu

Matthias Preuter wrote:

@Lars De Pauw Top! het werkt nu


Super, blij om dat te horen!

Hi guys,


And for maps web app, how i can add Markerclusterer?