sfGMap [Salesforce + Google Map + jQuery]

Saturday, April 2, 2011 by Aslam - The Alexendra
Hi All,
I came across many times for implementing Goolge Map on VF page for many clients in different needs. Every time its a time consuming process like download scripts, write code to fetch addresses, write code to set markers and additional javascript for that. So, I decided to make one Simple Component (Package) which is easy to use and embed in your VF page. Here is a live demo for the map on VF page which shows all accounts markers and info in popup.

https://labsprojects-developer-edition.ap1.force.com/mapdemo

Here is the package link wihch is used to install sfGMap package easily.

https://login.salesforce.com/?startURL=%2Fpackaging%2FinstallPackage.apexp%3Fp0%3D04t90000000Po3w





Here is some guidelines to use <c:sfgmap> the component.

You simply need to use component in your vf page with appropriate attributes.
--> width: Width of the map
--> height: Height of the map
--> addressmodel : all addresses need to show on map
--> uselatlng : check to see if use lat lng or address
--> zoom : zoom level for google map
--> default : default address where map will be center on load

Here is sample use:
<c:sfgmap width="600" height="400" addressmodel="{!addressmodel}" zoom="4" uselatlng="false">

Here AddressModel is a class which contains the list of Addresses. After installation of the package you can simply go to "mapdemo" VF page and "mapdemocontroller" to see the sample code how to use this.

This package is simple to use and time saving for many. Give it a try :)

Thanks
Aslam Bari
Posted in | 17 Comments »

17 comments:

Shaikh Mustakim said...

Good........

Kirtesh said...

:) good

anshulawesome said...

wao!!!!Again a excellent work.U r simply best in salesforce coding.

Raj Jha said...

Again You Have Done Good Job.

Anonymous said...

Hai Asalm,

Awesome!.............U great man

anshulawesome said...

It worked fine.But while integrating Gmap version-3 i have a issue.Total number of accounts of a particular region is not showing on mouseover on marker.

Arun said...

Hi am trying to show all accounts in vf page.
I tried it but I couldnt see all accounts.

Do I need to chage anything to see.

Anonymous said...

ran your code using the Accounts in my system, for some reason, it limits to show only the first 10 accounts on the map, and nothing more. Any reason for the limit?

Aslam - The Alexendra said...

We are using Free Google API in this example. So there is limit of using 10 calls at a time.
You can go with lat, long storing and using that on map, that way, you can show more items.

malem ching said...

Hi M using this application and its working fine but for the past few months m getting the Google API Update error . Below is the error

This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps/documentation/javascript/v2/introduction.html#Obtaining_Key.

would appreciate if reply soon.

Aslam - The Alexendra said...

@malem
I guess this is the issue with old api nowdays. Try to use v3 of google api. Also check the latest post here:
http://techsahre.blogspot.in/2013/03/salesforce-google-map-3-and-jquery-with.html

malem ching said...

Hi Aslam
Below is the code that I modify in the Visualforce component.

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsa7Q4gy5pzrZzsGkUxhRauOw12gtk9CA&sensor=false"


m not getting the error but m not able to see the map at all. do i need to change anything other than this.

malem ching said...

Hi i have upgraded with the GMapv3 also but its not showing the map ...in the vf page..wat are the changes that need to made ...

Munawar Esmail said...

Hi Aslam,
I am having same problem as malem. Do you know what I am missing? Site below:

http://contactus.devtxdot.cs11.force.com/mapdemotest

ramesh gollapally said...

Thanks for sharing fabulous information.It' s my pleasure to read it.I have also bookmarked you for checking out new posts.
Digital Marketing Training in Hyderabad


Kullayappa Adapala said...

Could u please share sample code

Denisa Cretu said...

This is a really super post. Must admit that you are amid the best writer I have read. I appreciate your making the effort to discuss this class of article.
www.juegosfrivas.com , www.kizidaily.com , www.friv2gamers.com

Post a Comment