Forum | Appery.io

I am trying to have contentLabel displayed on google map markers. The markers are display as expected and the functionality is fine. However, the contentLabel is not displayed when tested in browser.

 marker = new google.maps.Marker({               
         position: new google.maps.LatLng(value.geometry.location.lat, value.geometry.location.lng),       
         map: map, 
         labelContent: "Content" 

     });  

Are you able to reproduce the issue and suggest a resolution?

Regards.

I've followed the documentation here:
http://google-maps-utility-library-v3...

Hi Cody,

Are there any errors in console? Do you refresh map after adding a marker?

Hi Kateryna,

There are no errors on console and yes the map is refreshed. As I mentioned all markers appear as expected and listener events are handled well. However, the labelContent is not getting displayed.

I would recommend for your team being able to reproduce this issue, otherwise I can email support@appery, but this way you will have to deal with quite a bit of custom code.

Regards

Hi Cody,

I've tested google example which is described on this link:

http://google-maps-utility-library-v3...

And it works well with Appery.io application.

May be you did not added "marker with label" JS or did not use "MarkerWithLabel" to create marker?

So here is how to get it work:

1 Add new JS and fill it with code from this file(by link) http://google-maps-utility-library-v3...

http://prntscr.com/4vx1gm/direct

2 Now you can use following code to create marker with label.

pre

//Note: "multiGoogleMap" is your google map name.
var map = Appery("multiGoogleMap").options.mapElement.gmap('get', 'map');

var marker = new MarkerWithLabel({
//Note: you should use here your location coordinates.
position: new google.maps.LatLng(48.015883, 37.80285),
draggable: true,
map: map,
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});

/pre

That's all.

Regards.

Hi Yurii,

Many thanks for the suggestions and a meticulous approach of outlining necessary steps.

With the changes (essentially using MarkerWithLabel) we're getting the labels to display, but the mysteriously only two markers appear on the map (while all the labels show up). Attached are screenshots, the first MarkerWithLabel ($425K labels can be seen here slightly hidden in background), and the second with simple Marker where all markers show up as expected.

Are you able to reproduce this anomaly?
Regards.

Hi Cody,

I've tried it on google example http://google-maps-utility-library-v3...

and yes there is the same problem.

I can not tell why it works like that.

I guess you can ask about it from this plugin developer may be it's correct behavior.

Regards.

Hi Yurii,

It turns out that this was a bug in v1.01.

Using JS associated with v1.1.9 takes care of the issue and the behavior is now as expected:
http://google-maps-utility-library-v3...

Regards.

Hello Cody,

Thank you for the update, glad it works!

Sure. I do have a follow-up question, however. I need to include a CSS class for the labelClass. Could you point me to how and where this can be done (i.e. inclusion of .labels below)? Please note that the v1.1.9 libraries are in JS file in my project, and code related to map display as JS functions in the project.

Regards.

code
<style type="text/css">
&#46;labels {
color: white;
background-color: red;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
text-align: center;
width: 10px;
white-space: nowrap;
}
</style>

var marker = new MarkerWithLabel({
position: homeLatLng,
map: map,
draggable: true,
raiseOnDrag: true,
labelContent: "A",
labelAnchor: new google&#46;maps&#46;Point(3, 30),
labelClass: "labels", &#47;&#47; the CSS class for the label
labelInBackground: false
});

/code

http://google-maps-utility-library-v3...

Hi Cody,

It looks like you already have this implementation.

See details:
http://prntscr.com/4wl2xa/direct

You can change it class name.

Regards.