Marker Detail not working?

[JackByrne]

Hello,

I am trying to add a detail window to my marker on a map on a UX. I have got the marker to display in the correct location which is great, but I want to be able to display more information when the user clicks on that marker.

In the marker settings I have checked the "has detail" check-box. It says you can use a JavaScript Function by putting in "Javascript:myfunction" in the data box. I have done this and I get an error saying failed to get constructor of undefined or null reference. My function gets the value of two text-boxes.

Does the function have to do something specific?

Thanks.

[lvasic]

Is this still broken? I know this post is 8 years old. However, I seem to be having the same issue now.

[cptutrecht]

I found in some very old piece of our application an implementation with and alternative grid view. Maybe that is an option for you?
See attached screenshots
The template define in that view is:

<tr>
<td><b>{tbl.data("Relaties_bedrijfs_naam")}</b>&nbsp;Tel:&nbsp;{tbl.data("Relaties_telefoon")}<br><hr></td>
<td>{tbl.data("relaties_straat_postbus")}&nbsp;{tbl.data("Relaties_huis_postbus_num")}&nbsp;&nbsp;{tbl.data("relaties_postkode")}&nbsp;{tbl.data("Relaties_woonplaats")}</td>
</tr>

[Sarah Mitchell]

Is this still broken? I know this post is 8 years old. However, I seem to be having the same issue now.

"failed to get constructor of undefined or null reference" is a JavaScript error that occurs when you try to reference the constructor of an undefined property or element. How have you defined the Marker Detail.

[lvasic]

Sarah,
I'm calling a simple function:
function GetHQInfo(){
var vHQName = {dialog.Object}.getValue('HQName');
return vHQName;
}

[Sarah Mitchell]

Sarah,
I'm calling a simple function:
function GetHQInfo(){
var vHQName = {dialog.Object}.getValue('HQName');
return vHQName;
}

How are you creating the marker?

[lvasic]

This works when I hardcode it. If I put in a function it fails.


MapMarker.png

[Pat Bremkamp]

Back in 2017 before Alpha created this Google Map Method component, I had used the google instructions to create an A5 code page and put a map with up to 300 markers on it. Typically, Alpha creates these property sheets to gather the same information and generate the same javascript. So, this is a sample of what will be created. Perhaps this can give you some idea of what is needed. Alpha has colored markers numbered 1 to 99 avaialble as icons, so I used those. The zindex lets me stack them on top of each other (if needed) in numeric sequence. You can add more info in the "title" area.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
<script type="text/javascript">
function mapInitialize() {
var myLatLng = new google.maps.LatLng( <%a5 ?SESSION.LATITUDE %>, <%a5 ?SESSION.LONGITUDE %> );
var myOptions = { zoom: 6, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP };
var map1 = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({ position: myLatLng, title: "<%a5 ?SESSION.LOC_TITLE %>"});
marker.setMap(map1);
<%a5 ?vSitelist %>
}
</script>

The important part is var marker = new ..... to create the marker information, position and title, and then
marker.setMap(map1); to assign it to the map
This marker part is repeated for each location.

In this case, I created the text needed in Xbasic and added it to the scriipt with the "?vSitelist" You will want to do this in Javascript.
The Xbasic was a text string created as follows
if len(pJob[i].date) > 0 .and. g > 0 .and. g <= 99 .and. pJob[i].activity != "50" 'green - scheduled
*concat(vSitelist,"var myLatLng"+ndx+" = new google.maps.LatLng("+alltrim(str(pJob[i].latitude,13,8))+", "+alltrim(str(pJob[i].longitude,13,8))+" );")
*concat(vSiteList,"var marker"+ndx+" = new google.maps.Marker({ position: myLatLng"+ndx+", icon: 'led_icons/number_"+g+".png', title: '"+pJob[i].project+"', zIndex: "+alltrim(Str(99-i,2,0))+"});" )
*concat(vSitelist,"marker"+ndx+".setMap(map1);")

elseif pJob[i].activity = "25" .and. b > 0 .and. b <= 20 'blue - prepare project
*concat(vSitelist,"var myLatLng"+ndx+" = new google.maps.LatLng("+alltrim(str(pJob[i].latitude,13,8))+", "+alltrim(str(pJob[i].longitude,13,8))+" );")
*concat(vSiteList,"var marker"+ndx+" = new google.maps.Marker({ position: myLatLng"+ndx+", icon: 'images/markerN_"+vColor+cb+".png.a5image', title: '"+pJob[i].project+"', zIndex: "+alltrim(Str(99-i,2,0))+"});" )
*concat(vSitelist,"marker"+ndx+".setMap(map1);")

[Sarah Mitchell]

This works when I hardcode it. If I put in a function it fails.


MapMarker.png

Thank you, Lee. The information you provided allowed us to track down the problem. This issue is resolved and will be available in the next nightly build.

As a workaround, you can convert the action to JavaScript (either select Text Mode or convert to an Inline Javascript Action) and change this line:

class: (),

to this:

class: {},

Thanks again!