I have a VF page, integrating with Google Map. I have to load the Google Map with Washington DC. Also need to display a list of Person Accounts coming from my controller(after some search operation). Now, VF page coming as blank page. Since I am not that good in JS, pls let me know, where I have done the mistake with my code.
Note : Controller code & VF page(I used apex:map tag for Google Map)was working fine.In order to position zoom controller in the Google Map, I had to convert the map code to JS. I just added the below 3 lines in controller and created a new VF page for the Map. Thanks much in Advance.
Reshmi.
Controller Code :
public String addressList {get;set;}
lstAccount = Database.query(strQuery);
addressList = String.escapeSingleQuotes(JSON.serialize(lstAccount));
VF Page :
<apex:page controller="extSearchPersonAccountRecords" docType="HTML-5.0" sidebar="false">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var map,geocoder,infowindow;
$j = jQuery.noConflict();
$j(document).ready(function(){
initMap();
});
var locationlist = [['Washington','41.287471','-99.3817052']]
function initMap(){
var geocoder= new google.maps.Geocoder();
var Options={
zoom:12,
mapTypeControl: true,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
};
map = new google.maps.Map($j('#map')[0], Options);
codeAddress()
}
//============================= CODING ADDRESS ================================================
function codeAddress(){
var accountList = JSON.parse('{!addressList}');
for(var i=0;i<accountList.length;i++){
locationlist.push([accountList[i].Name,accountList[i].PersonMailingLatitude, accountList[i].PersonMailingLongitude]);
alert(locationlist[i]);
geocoder.geocode( {'address': locationlist[i]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location = locationlist[i].geometry.location;
var marker=addMarker(location);
attachInfoWindow(marker,locationlist[i]);
}
else {
alert(status); }
});
}
}
//================================== ADDING MARKER ========================
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
//set the bounds and initial zoom
var latlngbounds = new google.maps.LatLngBounds();
latlngbounds.extend(marker.getPosition());
map.fitBounds(latlngbounds);
map.setZoom(14);
return marker;
}
//============= MARKING WINDOW =====================
function attachInfoWindow(marker,address){
google.maps.event.addListener(marker, 'click', function() {
if(infowindow!=null)
{
infowindow.close();
}
var contentString = '<div class=" ui-state-active ui-corner-top" style="font-size: 1em; padding: 5px;">Address</div>'
+'<div class="ui-widget-content ui-corner-bottom" style="font-size: .9em; padding: 15px;">'+address.formatted_address+'</div>';
infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map,marker);
});
}
</script>
<!----------------------------- SCript ends----->
<style>
#map {
width:100%;
height:917px;
}
</style>
<div id="map" class="ui-widget-content ui-corner-all ui-state-default"> </div>
</apex:page>
locationlist
coming good inalert(locationlist[i])
? – Santanu Halder Nov 20 '15 at 6:48