0

I would like to ask for some help as I am trying to implement Google map in VF page. I face problem with infowindow- it appears but empty. I will really appreciate any help.

Apex Class

global with sharing  class mapController {
    global List<Agency__c> mapController1 {get;set;}
  @RemoteAction  
   global static List<Agency__c> getAgency(){
        List<Agency__c> mapController1 = new List<Agency__c>();
       mapController1 = [SELECT ID, Type__c, Location__Latitude__s, Location__Longitude__s from Agency__c WHERE Location__Latitude__s != null AND Location__Longitude__s !=null ];
        return mapController1;
    }

}

VF Page

<apex:page sidebar="false" showheader="false"  Controller="mapController" >
<head>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDDBQ9XiZET7NaiVbpLXfmnVkJRemATUBs&callback=initMap"></script>
<script type="text/javascript">

 var map;
 var popup_content = new Array();   


function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(51.5074, 0.1278),
        zoom: 15
    };

    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    load();
}

          google.maps.event.addDomListener(window, 'load', initialize);
    function load() {
       Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.mapController.getAgency}',
        function(result, event){
            if (event.status) {
                for (var i=0; i<result.length; i++) {
                    var id = result[i].Id;
                    var type = result[i].Type__c;
                    var lat = result[i].Location__Latitude__s;
                    var lng = result[i].Location__Longitude__s;
                    addMarker( id,type, lat, lng);
                }
            } else {
                alert(event.message);
            }
        },
        {escape: true}
    );

        function addMarker(id, type, lat, lng) {

    var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map,
            title: type
    });

            <apex:repeat value="{!mapController1}" var="loc" >
                popup_content.push("<b> Id: {!loc.Id} "); 
            </apex:repeat>  

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

              google.maps.event.addListener(marker, 'click', function(event) {
        infowindow.open(map, marker);
    }); 

            }

    }

</script>
</head>
<body>
  <div id="map-canvas"/>
</body>

</apex:page>
Improve this question
6
  • 3
    Any JavaScript errors in browsers developer tools? Are you able to see the markers? What doesn't work? – Raul Apr 18 '18 at 12:09
  • I am able to see the markers and the pop up but it is empty. It should include the Id of the Agency. – Jane Apr 18 '18 at 12:14
  • 2
    Do you see information with hardcoded content? Try adding console.log the value of popup_content – Raul Apr 18 '18 at 12:16
  • The <apex:repeat> is not working but I do not how and with what to change it and why it it not working. – Jane Apr 18 '18 at 13:01
  • 2
    JavaScript remoting is stateless, so you won't get the value of property mapController1 in apex:repeat but you would only inside the remote action call.. Check also this- stackoverflow.com/questions/11106671/… – Raul Apr 18 '18 at 13:23
1

In your example, the property mapController1 would not be set by JavasScript remoting function because of obvious reason: its stateless transaction.

Hence apex:repeat doesn't works. Also keep an eye on for any JavaScript errors when something is not working as expected. Your example gives following error:

enter image description here

Now to solve the issue, you already have the data because of passing the id parameter to addMarker() function. Following in add marker works:

function addMarker(id, type, lat, lng) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        title: type
    });

    var popup_content = "<b>record Id is " + id + ".";

    var infowindow = new google.maps.InfoWindow({
        content: popup_content
    }); 
    google.maps.event.addListener(marker, 'click', function(event) {
        infowindow.open(map, marker);
    }); 
}

Demo source code is here for reference.

Output: enter image description here

Improve this answer
2
  • That solves the problem and now I completely understand the things! Thank you very much! I really appreciate your help! – Jane Apr 18 '18 at 15:38
  • Nice, happy coding! – Raul Apr 18 '18 at 15:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.