Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
nagalakshminagalakshmi 

How to display the custom Google maps

Hi,

 

I Want to display the custom google maps in visual force page. please any one help me how to generate custom google map url and how to display the google map in visual force page..

 

Thank you,

Lakshmi

kxa422kxa422

You need to obtain a key from google, have a look on their web site to obtain one.

 

A code like that one should do the job

 

The line

var kml = new GGeoXml("http://MyServer/MyFile.kml");

is to be able to use your own kml file, remove it if you don't want to display any information like that.

 

 

<head> 
<script src="http://maps.google.com/maps?file=api&v=2.x&key=MyKeyFromGoogle" type="text/javascript"></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("map_canvas")); 
map.addControl(new GSmallMapControl()); 
geocoder = new GClientGeocoder(); 
geocoder.getLatLng( 
address, 
function(point) { 
if (!point) { 
document.getElementById("map_canvas").innerHTML = address + " not found"; 
} else { 
map.setCenter(point, 13); 
var marker = new GMarker(point); 
map.addOverlay(marker); 
marker.bindInfoWindowHtml("{!Account.Name}<br>{!Account.BillingStreet}<br>{!Account.BillingPostalCode}&nbsp; {!Account.BillingCity}<br>{!Account.BillingCountry}"); 
} 
} 
); 
var kml = new GGeoXml("http://MyServer/MyFile.kml");
map.addOverlay(kml);
} 
} 
</script> 
</head> 
<body onload="initialize()" onunload="GUnload()"> 
<div id="map_canvas" style="width:100%;height:300px"></div> 
</body> 
</html>