Apex Code Development You need to sign in to do that
Don't have an account?
Kanagaraj Arjunan 11 Hi I have develop a google map to show the location for more than 100 records
Hi All
I have develop a google map to show the location for more than 100 records. But now the problem is when the page is loading map is not display can you please anyone help to me to resolve this problem.
This my page
-------------------------
<apex:page sidebar="false" controller="MapController1">
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = JSON.parse('{!jsonString}');
alert({!jsonString});
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function () {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.type) {
case "Hospital":
icon = "red";
break;
case "Beach":
icon = "blue";
break;
case "Mall":
icon = "yellow";
break;
case "Park":
icon = "green";
break;
}
icon = "https://maps.google.com/mapfiles/ms/icons/"+icon+".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.title+"<br/>"+data.accountName+"<br/>"+data.description+"<br/>"+data.productName);
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
</script>
<table>
<tr>
<td valign="top">
<u>Legend:</u><br /><br /><br />
<img alt="" src="https://maps.google.com/mapfiles/ms/icons/red.png" />
Hospitals<br />
<img alt="" src="https://maps.google.com/mapfiles/ms/icons/blue.png" />
Beaches<br />
<img alt="" src="https://maps.google.com/mapfiles/ms/icons/yellow.png" />
Malls<br />
<img alt="" src="https://maps.google.com/mapfiles/ms/icons/green.png" />
Parks<br />
</td>
<td>
<div id="dvMap" style="width: 1200px; height: 555px">
</div>
</td>
</tr>
</table>
</body>
</html>
</apex:page>
This my controller
--------------------------
public class MapController1 {
List<Account> AccountList;
List<mapWrapper> mapWrapperList;
public String jsonString{get;set;}
public MapController1(){
mapWrapperList = new List<mapWrapper>();
for(Asset mw : [SELECT Name,Geolocation__Latitude__s,Geolocation__Longitude__s,type__c,Account_Address__c,Account.Name,AccountId,Service_Contract_Provider__c,Product2Id,Product2.Name,Product_Description__c,Lease_Start_Date__c,Actual_End_Date__c,Status from Asset where (Lease_Start_Date__c <=: System.Today() AND Actual_End_Date__c >=: System.today()) AND (Status ='Active Lease' OR Status= 'Future Lease')
And Geolocation__Latitude__s != null and Geolocation__Longitude__s != null AND type__c !=null AND Account.Name != null AND Service_Contract_Provider__c != null AND Account_Address__c != null AND type__c != null AND product2.Name != null AND Name != null]){
mapWrapper mwrap = new mapWrapper();
mwrap.title = mw.Name;
mwrap.accountName = mw.Account.Name;
mwrap.lat = String.valueOf(mw.Geolocation__Latitude__s);
mwrap.lng = String.valueOf(mw.Geolocation__Longitude__s);
mwrap.description = mw.Service_Contract_Provider__c;
mwrap.productName = mw.Product2.Name;
mwrap.type = mw.type__C;
mwrap.accountAddress = mw.Account_Address__c;
mapWrapperList.add(mwrap);
}
jsonString = json.serialize(mapWrapperList);
System.debug('>>>>>>>>>>>>>>>>>>>>>>>>>>>>.'+jsonString);
}
public class mapWrapper{
public String title{get;set;}
public String accountName{get;set;}
public String productName{get;set;}
public String lat{get;set;}
public String lng{get;set;}
public String type{get;set;}
public String description{get;set;}
public String accountAddress{get;set;}
}
}
I have develop a google map to show the location for more than 100 records. But now the problem is when the page is loading map is not display can you please anyone help to me to resolve this problem.
This my page
-------------------------
<apex:page sidebar="false" controller="MapController1">
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = JSON.parse('{!jsonString}');
alert({!jsonString});
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var i = 0;
var interval = setInterval(function () {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.type) {
case "Hospital":
icon = "red";
break;
case "Beach":
icon = "blue";
break;
case "Mall":
icon = "yellow";
break;
case "Park":
icon = "green";
break;
}
icon = "https://maps.google.com/mapfiles/ms/icons/"+icon+".png";
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.title+"<br/>"+data.accountName+"<br/>"+data.description+"<br/>"+data.productName);
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
</script>
<table>
<tr>
<td valign="top">
<u>Legend:</u><br /><br /><br />
<img alt="" src="https://maps.google.com/mapfiles/ms/icons/red.png" />
Hospitals<br />
<img alt="" src="https://maps.google.com/mapfiles/ms/icons/blue.png" />
Beaches<br />
<img alt="" src="https://maps.google.com/mapfiles/ms/icons/yellow.png" />
Malls<br />
<img alt="" src="https://maps.google.com/mapfiles/ms/icons/green.png" />
Parks<br />
</td>
<td>
<div id="dvMap" style="width: 1200px; height: 555px">
</div>
</td>
</tr>
</table>
</body>
</html>
</apex:page>
This my controller
--------------------------
public class MapController1 {
List<Account> AccountList;
List<mapWrapper> mapWrapperList;
public String jsonString{get;set;}
public MapController1(){
mapWrapperList = new List<mapWrapper>();
for(Asset mw : [SELECT Name,Geolocation__Latitude__s,Geolocation__Longitude__s,type__c,Account_Address__c,Account.Name,AccountId,Service_Contract_Provider__c,Product2Id,Product2.Name,Product_Description__c,Lease_Start_Date__c,Actual_End_Date__c,Status from Asset where (Lease_Start_Date__c <=: System.Today() AND Actual_End_Date__c >=: System.today()) AND (Status ='Active Lease' OR Status= 'Future Lease')
And Geolocation__Latitude__s != null and Geolocation__Longitude__s != null AND type__c !=null AND Account.Name != null AND Service_Contract_Provider__c != null AND Account_Address__c != null AND type__c != null AND product2.Name != null AND Name != null]){
mapWrapper mwrap = new mapWrapper();
mwrap.title = mw.Name;
mwrap.accountName = mw.Account.Name;
mwrap.lat = String.valueOf(mw.Geolocation__Latitude__s);
mwrap.lng = String.valueOf(mw.Geolocation__Longitude__s);
mwrap.description = mw.Service_Contract_Provider__c;
mwrap.productName = mw.Product2.Name;
mwrap.type = mw.type__C;
mwrap.accountAddress = mw.Account_Address__c;
mapWrapperList.add(mwrap);
}
jsonString = json.serialize(mapWrapperList);
System.debug('>>>>>>>>>>>>>>>>>>>>>>>>>>>>.'+jsonString);
}
public class mapWrapper{
public String title{get;set;}
public String accountName{get;set;}
public String productName{get;set;}
public String lat{get;set;}
public String lng{get;set;}
public String type{get;set;}
public String description{get;set;}
public String accountAddress{get;set;}
}
}