I am creating a Visualforce component which holds a google map. The plan is to pass a list of addresses to this component and the map will place markers over these addresses.
Here is a sample visualforce component which shows markers for the hardcoded addresses :
<apex:component >
<apex:attribute name="addressList" type="String[]" description="array of addresses"/>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var myOptions = {
center: new google.maps.LatLng(54, -2),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var addressArray = [];
addressArray = '{!addressList}';
var geocoder = new google.maps.Geocoder();
var markerBounds = new google.maps.LatLngBounds();
for (var i = 0; i < addressArray.length; i++) {
geocoder.geocode( { 'address': addressArray[i]}, function(results, status) {
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);
}
});
}
});
</script>
<style>
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:500px;
width: 800px;
background:transparent;
}
</style>
<div id="map"></div>
</apex:component>
We can pass a List of addresses (as a List) to this component.
<apex:page controller="MyCtrller">
<c:MyMapComponent addressList="{!listOfAddresses}"/>
</apex:page>
Where
public class MyCtrller {
public List<String> listOfAddresses {get; set;}
public MyCtrller() {
listOfAddresses = new List<String>();
listOfAddresses.add('2001 Gemini St, Houston, TX');
listOfAddresses.add('210 E Huron St, Ann Arbor');
listOfAddress.add('45th Park Ave, New York');
}
}
However it gives me the following error:
Geocode was not successful for the following reason: OVER_QUERY_LIMIT
and
Geocode was not successful for the following reason: ZERO_RESULTS
Surprisingly if I hardcode the same addresses in the javascript like :
var addressArray = new Array("2001 Gemini St, Houston, TX" , "210 E Huron St, Ann Arbor", "45th Park Ave, New York");
it drops the markers on the respective locations.
I put an alert(addressArray) to check, but it seems addressArray is receiving the addresses correctly like this:
[2001 Gemini St, Houston, TX, 210 E Huron St, Ann Arbor, 45th Park Ave, New York]
I do not understand how I am running out of query limits when I pass the addresses from a vf component. Or am I passing the addresses in an incorrect fashion?