You need to sign in to do that
Don't have an account?

Display a google map with thousands of markers using a visualforcepage and overcome this error ?
This is the error
Geocoding Service: You have exceeded your daily request quota for
I know about the limitations, what i need is a solution to the problem
This is the code
<apex:page standardController="Account" recordSetVar="accounts" >
<apex:pageBlock >
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=xxxixixixixixixixixixixi"></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 = {
zoom: 20,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true
}
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var address = new Array();
<apex:repeat value="{!accounts}" var="addresss">
if("{!addresss.BillingCountry}" != ""){
address.push("{!addresss.BillingCountry}");
}
</apex:repeat>
var infowindow = new google.maps.InfoWindow({
content: ""
});
for (var x = 0; x < address.length; x++) {
console.log();
console.log(address[x]);
geocoder.geocode( { address: address[x]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);
//center map results[0].geometry.location
// map.setCenter(geoSuccess);
//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Account.Name}"
});
//add listeners
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
map.setCenter(marker.getPosition());
});
}
} else {
$('#map').css({'height' : '15px'});
$('#map').html("Oops! {!Account.Name}'s address could not be found, please make sure the address is correct.");
resizeIframe();
}
})};
function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
}
}
}
});
</script>
<style>
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:500px;
background:transparent;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</apex:pageBlock>
</apex:page>
How to center the map after, on your current location that will be helpfull
Geocoding Service: You have exceeded your daily request quota for
I know about the limitations, what i need is a solution to the problem
This is the code
<apex:page standardController="Account" recordSetVar="accounts" >
<apex:pageBlock >
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=xxxixixixixixixixixixixi"></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 = {
zoom: 20,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true
}
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var address = new Array();
<apex:repeat value="{!accounts}" var="addresss">
if("{!addresss.BillingCountry}" != ""){
address.push("{!addresss.BillingCountry}");
}
</apex:repeat>
var infowindow = new google.maps.InfoWindow({
content: ""
});
for (var x = 0; x < address.length; x++) {
console.log();
console.log(address[x]);
geocoder.geocode( { address: address[x]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
//create map
map = new google.maps.Map(document.getElementById("map"), myOptions);
//center map results[0].geometry.location
// map.setCenter(geoSuccess);
//create marker
marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "{!Account.Name}"
});
//add listeners
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
map.setCenter(marker.getPosition());
});
}
} else {
$('#map').css({'height' : '15px'});
$('#map').html("Oops! {!Account.Name}'s address could not be found, please make sure the address is correct.");
resizeIframe();
}
})};
function resizeIframe() {
var me = window.name;
if (me) {
var iframes = parent.document.getElementsByName(me);
if (iframes && iframes.length == 1) {
height = document.body.offsetHeight;
iframes[0].style.height = height + "px";
}
}
}
});
</script>
<style>
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:500px;
background:transparent;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</apex:pageBlock>
</apex:page>
How to center the map after, on your current location that will be helpfull
Solution is to use alternatives maps like Leaflet instead of google maps for large data. Thanks everyone for your comments.
All Answers
https://salesforce.stackexchange.com/questions/27566/google-geocoding-api-error-message-you-have-exceeded-when-trying-to-get-la
https://github.com/googlemaps/google-maps-services-python/issues/109
https://stackoverflow.com/questions/28962765/exceeded-usage-limits-for-geocoding-api
https://calendardiy.com/february-calendar.html
Solution is to use alternatives maps like Leaflet instead of google maps for large data. Thanks everyone for your comments.