1

I am passing an array of address from my apex class. The addresses are coming over fine in JavaScript but I get an error mentioned below. The marker works fine when I hardcode the same address in the javascript.

ZERO_RESULTS

OVER_QUERY_LIMIT

Below is my VF PAGE

<apex:page showHeader="false" controller="GetRoute">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps API v3 Directions Example</title>
    <script type="text/javascript" src="//maps.google.com/maps/api/js?key=AIzaSyAU45YYMFsnUGvJFTTcmxrP-dMTc3Eay9o&sensor=true"></script>


</head>

<body style="font-family: Arial; font-size: 12px;">
    <apex:form id="theForm">
        <apex:repeat value="{!addressList}" var="a">
            The Text is {!a}
        </apex:repeat>
        <apex:inputhidden id="start" value="{!startpoint}" />
        <apex:inputhidden id="end" value="{!endpoint}" />
    </apex:form>

    <div style="width: 100%;" id="mapDiv">
        <div id="map" style="width: 70%; height: 600px; float: left;margin:0px;color:black;"></div>
        <div id="panel" style="width: 30%; float: left;margin:0px;"></div>
    </div>
    <script type="text/javascript">
    var myList = new Array();
    myList = '{!addressList}'; // When myList is used , error is thrown 
    var addressArray = ["Aurangabad","Kolkata","Lucknow"];   //This works fine
    console.log("========addressList======>" + addressArray);

    var geocoder= new google.maps.Geocoder();
    var markerBounds = new google.maps.LatLngBounds();

for (var i = 0; i < myList.length; i++) {
    geocoder.geocode( { 'address': myList[i]}, function(results, status) { // when I replace mylist with addressArray, I dont get any error
        console.log("=====City being processed====>"+addressArray[i]);
        console.log("=====STATUS=====>"+status);
        console.log("=====RESULTS=====>"+results);

        if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            markerBounds.extend(results[0].geometry.location);
            map.fitBounds(markerBounds);
        } else {
            //alert("Geocode was not successful for the following reason: " + status);
        }
    });
}



        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer();

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 0,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('panel'));

        var request = {
            origin: document.getElementById("{!$Component.theForm.start}").value,
            destination: document.getElementById("{!$Component.theForm.end}").value,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                ex = document.getElementById("{!$Component.theForm.start}").value;
                console.log("====start point is ===>" + ex);
                console.log("=====ReSPONSE IS ======>" + response);
                directionsDisplay.setDirections(response);
            }
        });
    </script>
</body>

Below is my APEX Class

public with sharing class GetRoute {
public static List<String> addressList{get;set;}

public GetRoute(){
    addressList = new List<String>();
    addressList.add('Pune');
    addressList.add('Indore');
    addressList.add('Lucknow');
    addressList.add('Delhi');
}

Below is a snapshot of the address in console. Seems same to me. Console log

I am getting mixed result in console and the tags are showing in wrong country. enter image description here

Improve this question
1
  • If you say it works when you hardcode the address on the JS, then probably there's an issue with your apex controller class. Post it as well.
    – Renato Oliveira
    Feb 8, 2018 at 12:52

2 Answers 2

Reset to default
1

First of all, when you use {!addressList} in your Visualforce, what Salesforce returns to you as a string is [Pune, Indore, Lucknow, Delhi] (you can check this for yourself using console.log('{!addressList}')), and for you to use those values in JavaScript you'd need quote marks for those values, like ["Pune", "Indore", "Lucknow", "Delhi"] (and it should be a list) otherwise JavaScript will treat each of them as variables (which are not defined in your code).

Secondly, in your JS you are passing start and end to the script that queries the addresses, but I don't see startpoint or endpoint in yoru class. So I think you didn't post the entire class code, or your Visualforce is invalid.

So I think your script is trying to query for null or undefined addresses, and it results in errors.

To fix the variable to list

public with sharing class GetRoute {
    public String addressList{get;set;}

    public GetRoute() {
        List<String> addressList = new List<String>();
        addressList.add('Pune');
        addressList.add('Indore');
        addressList.add('Lucknow');
        addressList.add('Delhi');
        this.addressList = JSON.serialize(addressList);
    }
}

This outputs on the page and on console.log: ["Pune","Indore","Lucknow","Delhi"]

Improve this answer
4
  • Start point and end point i am passing form lightning component which is working fine on map. Shall i post that as well? How can i convert that in list.? Any idea about it?
    – Samir
    Feb 8, 2018 at 13:11
  • Change your class variable from List<String> to just String, and serialize it to a JSON. On the page, it will be interpreted as a list.
    – Renato Oliveira
    Feb 8, 2018 at 13:14
  • I made suggested changes in Apex and i am still seing the same error. Do i need to change something in VF as well?
    – Samir
    Feb 8, 2018 at 13:35
  • Forgot to add that I am getting mixed error in Console and the tag are coming up but on wrong location ..actually in wrong country. updated same in question
    – Samir
    Feb 8, 2018 at 13:47
0

Thanks to the answer that I came to what is the issue.Thought I was not not able to resolve it with the answer posted. I did some tweak i javascript as was able to get it resolved

var myList = '{!addressList}'; 
var a = myList.replace("[", "");
a = a.replace("]", "");
var array = a.split(",");
var addressArray = ["Pune", "Indore", "Lucknow", "Delhi"]; //This works fine
console.log(myList);
//debugger;
var geocoder = new google.maps.Geocoder();
var markerBounds = new google.maps.LatLngBounds();

for (var i = 0; i < array.length; i++) {
         //code pasted in question
}

My List

public GetRoute() {
        addressList = new List<String>();
        addressList.add('Patna');
        addressList.add('Indore');
        addressList.add('Lucknow');
        addressList.add('Mumbai');
        addressList.add('Bhopal');
        addressList.add('New York');
}
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .