[Google Maps] Marker click doesn't fire

[Google Maps] Marker click doesn't fire

  

Hi,

The purpose is to have a Google Map on a screen with markers based on a list and when you click on a marker a popup appears with some information. 


In the preparation of the screen the following flow:

In a for each loop the markers are added to the map with a mapid, an address and some MarkerOptions:

SyntaxEditor Code Snippet

" { title: 'test',
    visible: true,
    clickable: true
  }
"

This works fine, so far so good.

After adding a marker I add an click-event to the marker with a MapId, the markerId from the previous action, the Triggerevent 'click' and a handler.

with a handler as follows:

SyntaxEditor Code Snippet

"function() {
    var contentString = 
    '<h3 style='margin:0'>Test</h3>
     <strong>Adres:</strong><br>" 
     +   FormatDutchAddress ( ProjectList.List.Current.Project.Street
                            , ProjectList.List.Current.Project.Housenumber
                            , ProjectList.List.Current.Project.Houseletter
                            , ProjectList.List.Current.Project.City
                            , ProjectList.List.Current.Project.Country) 
     + "';

    var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    // Access this gMarker's map, set the center
    // to its position and zoom
    this.getMap().setCenter(this.getPosition());
    this.getMap().setZoom(8);    
    infowindow.open(this.getMap(), this);
}"

In some way, this doesn't work. 

Inspecting the html and javascript, all information is present in the sourcecode.
What am I missing? 


I hope someone can help me.
Thanks in advance.

Willem

Hi Willem,


Comparing your code with the one in the sample app, it seams that you are missing the escaping of the single quotes in <h3> tag.


The sample code is (I removed the backslash and the popup stopped to work just like in your case):

"function() {
    var contentString = 
        '<h3 style=\'margin:0\'>"+GetPointsOfInterest.List.Current.PointOfInterest.Title+"</h3><br>'+
        '<strong>Address:</strong><br>'+
        '"+GetPointsOfInterest.List.Current.PointOfInterest.Address+"<br>';

    var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    // Access this gMarker's map, set the center
    // to its position and zoom
    this.getMap().setCenter(this.getPosition());
    this.getMap().setZoom(8);
    infowindow.open(this.getMap(), this);
}"


Your code is:


"function() {
    var contentString = 
    '<h3 style='margin:0'>Test</h3>
     <strong>Adres:</strong><br>" 
     +   FormatDutchAddress ( ProjectList.List.Current.Project.Street
                            , ProjectList.List.Current.Project.Housenumber
                            , ProjectList.List.Current.Project.Houseletter
                            , ProjectList.List.Current.Project.City
                            , ProjectList.List.Current.Project.Country) 
     + "';

    var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    // Access this gMarker's map, set the center
    // to its position and zoom
    this.getMap().setCenter(this.getPosition());
    this.getMap().setZoom(8);    
    infowindow.open(this.getMap(), this);
}"


Cheers,

Renato


Willem Markus wrote:

Hi,

The purpose is to have a Google Map on a screen with markers based on a list and when you click on a marker a popup appears with some information. 


In the preparation of the screen the following flow:

In a for each loop the markers are added to the map with a mapid, an address and some MarkerOptions:

SyntaxEditor Code Snippet

" { title: 'test',
    visible: true,
    clickable: true
  }
"

This works fine, so far so good.

After adding a marker I add an click-event to the marker with a MapId, the markerId from the previous action, the Triggerevent 'click' and a handler.

with a handler as follows:

SyntaxEditor Code Snippet

"function() {
    var contentString = 
    '<h3 style='margin:0'>Test</h3>
     <strong>Adres:</strong><br>" 
     +   FormatDutchAddress ( ProjectList.List.Current.Project.Street
                            , ProjectList.List.Current.Project.Housenumber
                            , ProjectList.List.Current.Project.Houseletter
                            , ProjectList.List.Current.Project.City
                            , ProjectList.List.Current.Project.Country) 
     + "';

    var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    // Access this gMarker's map, set the center
    // to its position and zoom
    this.getMap().setCenter(this.getPosition());
    this.getMap().setZoom(8);    
    infowindow.open(this.getMap(), this);
}"

In some way, this doesn't work. 

Inspecting the html and javascript, all information is present in the sourcecode.
What am I missing? 


I hope someone can help me.
Thanks in advance.

Willem



Hi Renato,

Thanks for your reply. 

I changed the code, but it still doesn't work. 

I changed the code in the second place in the most simple way to 

SyntaxEditor Code Snippet

"function() {
    var contentString = 
    '<h3>Test start</h3>';

    var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    // Access this gMarker's map, set the center
    // to its position and zoom
    this.getMap().setCenter(this.getPosition());
    this.getMap().setZoom(8);    
    infowindow.open(this.getMap(), this);
}"

but still nothing to see, when clicking on the markers.
Do you have another suggestion?

Kind regards, Willem

Hi Willem,


I copy+pasted your code into the GoogleMaps plugin demo app and it worked OK, so the problem should be in another part of your solution.


The GoogleMaps demo contain additional elements that I don't see in your print screens, like the creation of map bounds and association of markers to it (I don't know if it has any additional effect...). 



Willem Markus wrote:

Hi Renato,

Thanks for your reply. 

I changed the code, but it still doesn't work. 

I changed the code in the second place in the most simple way to 

SyntaxEditor Code Snippet

"function() {
    var contentString = 
    '<h3>Test start</h3>';

    var infowindow = new google.maps.InfoWindow({
          content: contentString
      });

    // Access this gMarker's map, set the center
    // to its position and zoom
    this.getMap().setCenter(this.getPosition());
    this.getMap().setZoom(8);    
    infowindow.open(this.getMap(), this);
}"

but still nothing to see, when clicking on the markers.
Do you have another suggestion?

Kind regards, Willem



Solution

Hi Renato,

Thanks for the explanation.
I finally solved the problem by removing the single quotes in the TriggeringEvent. This has to be "click" in stead of " 'click' ".
Thank you for thinking along.


Kind regards, Willem

Solution

I'm glad you solved it!


Cheers,

Renato


Willem Markus wrote:

Hi Renato,

Thanks for the explanation.
I finally solved the problem by removing the single quotes in the TriggeringEvent. This has to be "click" in stead of " 'click' ".
Thank you for thinking along.


Kind regards, Willem