Apex Code Development You need to sign in to do that
Don't have an account?
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>
Hi,
I had used google maps in visualforce page.
Hereby, I am attaching the code for your reference.
<apex:page standardController="Account">
<script src="https://maps.google.com/maps?file=api&v=2&key=AIzaSyCT4-mvPC-EXC1yUKvGIKr0kNgAMtpZ5Ww&sensor=true">
</script>
<script type="text/javascript">
var map = null;
var geocoder =null;
var address = "{!Account.BillingStreet}, {!Account.BillingPostalCode} {!Account.BillingCity}, {!Account.BillingState}, {!Account.BillingCountry}";
function initialize()
{
if(GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("MyMap"));
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl3D());
map.enableScrollWheelZoom();
geocoder = new GClientGeocoder();
geocoder.getLatLng(address,function(point)
{
if (!point)
{
document.getElementById("MyMap").innerHTML = address + " not found";
}
else
{
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.bindInfoWindowHtml("Account Name : <b><i> {!Account.Name} </i></b> Address : "+address);
}
}
);
}
}
</script>
<body>
<div id="MyMap" style="width:100%;height:300px"></div>
<script>
initialize() ;
</script>
</body>
</apex:page>
If this posti is useful for you, don't forget to give kudos.
Thanks,
Sachin
Hi Sachin,
Thanks for replying,
I am trying get multiple accounts and show all addresses in single map.
Hi,
I never tried to show all addresses on single visualforce page.
You can embed this page in pagelayout of Account & it will show respective account's address in this page.
Thanks,
Sachin.