Google Map On Detail Page Without Controller

Lot of time we need to implement Google map direct on production. On production we can't create classes or contorllers. But we can create VF pages. So I tried to solve this problem. 

I implemented Google Map on Visualforce page, you can Implement this as inline VF page of any object. 

I am using here Account object and Billing Adress for pointing -

For this you need two jquery file that will stored in Static Resource, 

download from this link - 

https://docs.google.com/folder/d/0ByQHiG1jMnmAVnE4blFjSU1aeU0/edit?usp=sharing

and then Copy and paste this code on visualforce page. - 

<apex:page standardController="Account" showHeader="false" sidebar="false" >  

   <apex:includeScript value="https://maps.googleapis.com/maps/api/js?sensor=false"/>  

   <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-1.6.2.min.js')}"/>  

   <apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.16.custom.min.js')}"/>  

   <apex:includeScript value="{!URLFOR($Resource.jqPlugin, '/jquery.blockUI.js')}"/>  

   <apex:stylesheet value="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.16.custom.css')}"/>  

   <script>  

      var console = {log: function(){}};

      var map,geocoder,infowindow;  

      var latLngs = [];  

      $j = jQuery.noConflict();   

      $j(document).ready(function(){  

        initialize();  

      });  

      function initialize() {  

       geocoder = new google.maps.Geocoder();  

       //initial cordinates for map init  

         

       var latlng = new google.maps.LatLng(37.09024, -95.712891);  

       //var latlng = new google.maps.LatLng(0, 0);  

       var myOptions = {  

         zoom: 10,  

         center: latlng,  

         mapTypeId: google.maps.MapTypeId.ROADMAP  

       };  

       map = new google.maps.Map($j('#map')[0], myOptions);  

       codeAddress();  

      }  

     function codeAddress(){  

       var address = '{!Account.BillingStreet},{!Account.BillingCity},{!Account.BillingState},{!Account.BillingCountry}';  

        console.log(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 );  

            //attach info window to the marker  

            attachInfoWindow(marker,results[0]);  

          }  

          else {  

            //alert(status);  

          }  

        });   

      }  

     

      function addMarker(location) {  

       marker = new google.maps.Marker({  

           position: location,  

           map: map  

         });  

       var latlngbounds = new google.maps.LatLngBounds();  

       latlngbounds.extend(marker.getPosition());  

       map.fitBounds(latlngbounds);  

       map.setZoom(14);  

       return marker;  

      }  

     //this function shows the address of a marker when it is clicked  

     function attachInfoWindow(marker,address){  

        google.maps.event.addListener(marker, 'click', function() {  

          if(infowindow!=null)  

           {  

             infowindow.close();  

           }  

        

         var contentString = '<div class=" ui-state-active ui-corner-top" style="font-size: 1em; padding: 5px;">Address</div>'  

                   +'<div class="ui-widget-content ui-corner-bottom" style="font-size: .9em; padding: 15px;">'+address.formatted_address+'</div>';  

         infowindow = new google.maps.InfoWindow({  

           content: contentString  

         });  

          infowindow.open(map,marker);  

        });  

     }  

   </script>  

   <style>  

     #map {  

       width:100%;  

       height:200px;   

       margin-left:0;  

     }  

   </style>  

     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

   <div id="map" class="ui-widget-content ui-corner-all ui-state-default"></div>  

 </apex:page>