Cody Blue
Posts: 0
Joined: Sun Aug 25, 2013 2:11 am

contentLabel display issue in Google maps marker

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.

Code: Select all

 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...

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

contentLabel display issue in Google maps marker

Hi Cody,

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

Cody Blue
Posts: 0
Joined: Sun Aug 25, 2013 2:11 am

contentLabel display issue in Google maps 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

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

contentLabel display issue in Google maps marker

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.

Cody Blue
Posts: 0
Joined: Sun Aug 25, 2013 2:11 am

contentLabel display issue in Google maps marker

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.

Image

Image

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

contentLabel display issue in Google maps marker

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.

Cody Blue
Posts: 0
Joined: Sun Aug 25, 2013 2:11 am

contentLabel display issue in Google maps marker

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.

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

contentLabel display issue in Google maps marker

Hello Cody,

Thank you for the update, glad it works!

Cody Blue
Posts: 0
Joined: Sun Aug 25, 2013 2:11 am

contentLabel display issue in Google maps marker

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...

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

contentLabel display issue in Google maps marker

Hi Cody,

It looks like you already have this implementation.

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

You can change it class name.

Regards.

Return to “Issues”