Sign Up ›
  • Vladimir Mironov 7
  • NEWBIE
  • 0 Points
  • Member since 2016
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
4 replies

Google map - Salesforce

Hi ,

 

 I  have list view button on account, The button have select multiplem records and need to show google map. 

 

1. i am not getting proper marker on googlemap

2. i am not getting all selected address in google map

 

<apex:page sidebar="false" standardController="Account" recordSetVar="SelectedAccounts" extensions="MapController">
<head>
<script type='text/javascript' src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<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/jqueryui/1.8/jquery-ui.min.js"></script>
<style>
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:400px;
padding: 20px;
}
.roundCornerCss{
/* outer shadows (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);

/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;

/* gradients */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
}

</style>
<script type='text/javascript'>
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var places = [];
var title_content = new Array();
var popup_content = new Array();
var address = new Array();
var address_position = 0;
var timeout = 600;
function initialize() {



var myOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false

}
geocoder = new google.maps.Geocoder();

<apex:repeat value="{!selected}" var="loc" id="addressesId">

title_content.push("Name: "+"{!loc.Name}"+" \nClick for more Detail");
address.push("{!loc.BillingStreet}, {!loc.BillingCity},"
+" {!loc.BillingPostalCode},{!loc.BillingCountry}");
popup_content.push("<b>Account Name: {!loc.Name}"
+"<br/>Street: {!loc.BillingStreet}"
+"<br/>City: {!loc.BillingCity}<br/>Postal Code: {!loc.BillingPostalCode}"+
+"<br/>Country: {!loc.BillingCountry }</b>");
</apex:repeat>

map = new google.maps.Map(document.getElementById("map"), myOptions);
addMarker(address_position);

}
function addMarker(position) {
geocoder.geocode({'address': address[position]}, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
alert(address[position]);
places[position] = results[0].geometry.location;
alert(places[position]);
//center map
map.setCenter(results[0].geometry.location);

var marker = new google.maps.Marker({
position: results[0].geometry.location,
title:title_content[position],
icon: getMapIconUrl(position+1),
map: map
});
google.maps.event.addListener(marker, 'click', function() {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
infowindow.setContent(popup_content[position]);
infowindow.open(map, marker);
});


}
else{
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT){
setTimeout(function() { addMarker(position); }, (timeout * 3));
}
}
address_position++;
if (address_position < address.length){
setTimeout(function() { addMarker(address_position); }, (timeout));
}
});
}
function getMapIconUrl(markerNumber){
if(markerNumber > 2){
markerNumber = markerNumber%2;
}
var mapIconUrl = "{!URLFOR($Resource.GoogleMarkers, 'GoogleMark/1.png')}";
var newIcon = markerNumber+'.png';
mapIconUrl = mapIconUrl.replace('1.png',newIcon);
return mapIconUrl;
}
</script>
</head>
<body>
<div id="map" class="roundCornerCss"></div>
<script>
initialize();
</script>

</body>


</apex:page>