Display maps in Salesforce Record View screen

Problem Statement:  

  We have a Custom Object to maintain 'Shipment details', which has 'To Address' and 'From Address' details along with other information in Salesforce.We need to display these details on a Map along with other information in the Detailed screen.

Approach we Used:
 Its very easy to display it on maps. We followed below steps to implement it.

1.  Create a Visualforce Page  to display map using Google Maps API with Javascript.
1. To create new Visual page, click on setup, then in left navigation pane, go to Build > Develop > Pages
2. List of all Visual pages are displayed. Click on New and provide required fields
3. Now, paste below code in the Markup Block

     
      
    <apex:page standardController="<<Custom Object API Name>>">  
    <apex:pageBlock >  
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>  
    <script>  
         var directionsDisplay;  
         var directionsService = new google.maps.DirectionsService();  
         var map;  
         function initialize() {  
          directionsDisplay = new google.maps.DirectionsRenderer();  
          var chicago = new google.maps.LatLng(41.850033, -87.6500523);  
          var mapOptions = {  
              zoom:7,  
              center: chicago  
          };  
          map = new google.maps.Map(document.getElementById('map'), mapOptions);  
          directionsDisplay.setMap(map);  
          var request = {  
               origin:new google.maps.LatLng({!<<Custom Object API Name>>.From_Geo_Location__Latitude__s}, {!<<Custom Object API Name>>.From_Geo_Location__Longitude__s}),  
               destination:new google.maps.LatLng({!<<Custom Object API Name>>.To_Geo_Location__Latitude__s}, {!<<Custom Object API Name>>.To_Geo_Location__Longitude__s}),  
               travelMode: google.maps.TravelMode.DRIVING  
          };  
          directionsService.route(request, function(response, status) {  
              if (status == google.maps.DirectionsStatus.OK) {  
               directionsDisplay.setDirections(response);  
              }  
          });  
         }  
         google.maps.event.addDomListener(window, 'load', initialize);       
    </script>  
    <div style='height:230px;width:100%'>  
      <div class='map' id="map"></div>  
    </div>  
    </apex:pageBlock>  
    </apex:page>  
   

4. For Origin and Destination values in above code we provided the latitude and longitude coordinates of the data stored in the record
5. Save the page.
2.  This page will be listed in the layout screen of the custom object for which we are creating
3. Add this page into any section of layout where we want to display.
4. To add this, Click on Setup, in left navigation pane, go to Create > Objects
5. All the custom objects are displayed, select the Object on which we are working and go to 'Page Layouts' section and click Edit 
   
6. Add a new section and drop the listed page into it and Save.
7. Now click on any record of the custom object to see the map we added with directions between the 2 locations of the same reord