How to implement Google Map in visualforce page ?

Implement Google Map in visualforce page

Following code works for you if you need Google Map in visualforce page,

1. If your visualforce page does not show up with the map then just replace the "<script src="http://maps.google.com/maps?file=api" />" to "<script src="https://maps.google.com/maps?file=api" />".

2. As you can see that I have used standard controller so you need to pass the account Id in URL. Let’s say if the page name is “ImplementGoogleMaps” then the URL will look something like this : “…/apex/ImplementGoogleMaps?id=YOUR_ACCOUNT_ID”.

3. When you click on the balloon(Map marker) it will show you the Account name and the address, you can change it according to your need by changing the code of line "marker.bindInfoWindowHtml"

Reference :
http://code.google.com/apis/maps/documentation/webservices/

Original Posted by Forceguru : http://forceguru.blogspot.com/2012/01/integrating-google-maps-in-salesforce.html

Hope it help you out !!

<apex:page standardController="Account">

<script src="http://maps.google.com/maps?file=api" />

<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());
         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>

<div id="MyMap" style="width:100%;height:300px" />

<script>
    initialize() ;
</script>

</apex:page>