Google Map Integration With Salesforce

I got a requirement of showing google map of Account Billing address on detail page of Account. In the starting I was thinking how to do it, but didn't get anything, but now at the end I tried this below code and everything is working as fine as visible down there.

In this below scenario user don't have to submit their APIKey of Google Map to get the Map of the Address. and one more thing here am not using any Controller/Apex class only and only page is doing everything.

Here it is the Detail Page of Account and the Location of Account billing address using Google Map

Below is the Visual force Page

<!--
/**
* Description : Component for showing google map of Account Address.
*
* Created Date : 12/25/2013
*
* Created By : Abhi Tripathi
*
* Version : V1_0
**/
-->
<apex:page standardController="Account">
    
    <!-- Import Necessary Jquery js File and StyleSheets-->
    <apex:includeScript value="{!URLFOR($Resource.jQuery_GoogleMap, 'js/GSensor.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQuery_GoogleMap, 'js/jquery-1.6.2.min.js')}"/>
    <script>
    var map,geocoder,infowindow;
    var latLngs = [];
    $j = jQuery.noConflict();
    $j(document).ready(function(){
        initialize();
    });
    
    function initialize() {
        geocoder = new google.maps.Geocoder(37.09024, -95.712891);
        //initial cordinates for map init
        var latlng = new google.maps.LatLng();
        var myOptions = {
            center: latlng,
            zoom: 2,
            maxZoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        //load the map
        map = new google.maps.Map($j('#map')[0], myOptions);
        codeAddress();
    }
    
    /*This function codes the address using the Billing Address in the Acoount*/
    function codeAddress(){
        //prepare a string for geocoding
        var address = '{!JSENCODE(Account.BillingStreet)},{!JSENCODE(Account.BillingCity)},{!JSENCODE(Account.BillingCountry)},{!JSENCODE(Account.BillingPostalCode)}';
        console.log(address);
        
        //geocode the address
        geocoder.geocode( { 'address': address }, function(results, status) {
            //if it is a success
            if (status == google.maps.GeocoderStatus.OK) {
                var location = results[0].geometry.location;
                var marker=addMarker(location );
            }
            else {
                // alert(status);
            }
        });
    }
    
    /*
*This method adds a marker to the provided location
**/
    function addMarker(location) {
        marker = new google.maps.Marker({
            position: location,
            map: map
        });
        //set the bounds and initial zoom
        var latlngbounds = new google.maps.LatLngBounds();
        latlngbounds.extend(marker.getPosition());
        map.fitBounds(latlngbounds);
        map.setZoom(14);
        return marker;
    }
    
    </script>
    <style>
        #map {
        width:100%;
        height:500px;
        margin-left:59.5%;
        }
    </style>
    <div id="map" class="ui-widget-content ui-corner-all ui-state-default"></div>
</apex:page>

Save that above code before that save this Jquery files and after that save them into your static resource with their corresponding name

Click Below Links for the JQuery files

GSensor
jquery-1.6.2.min
jquery-ui-1.8.16.custom.min

After saving the above jquery files in Static Resource and saving your visualforce page.

Go to
Customize --> Accounts --> Page Layout --> Edit(One of page layout) --> Visualforce Pages(sidebar of layout)

Search your page and add it to the page layout. and see the magic
Note: Billing address need to be filled with correct addres otherwise its will show a default map.

Happy Coding..!!