Sunday, 21 June 2015

Google map and Direction API with Visualforce page

Google map API :

Google Direction API:


Same i want to use in salesforce with dynamic addresses.

So This is the code.

Implement same and write some logic in controller side.

<apex:page showHeader="false" >
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   <title>Google Maps API v3 Directions Example</title>
   <script type="text/javascript" src="//"></script>
<body style="font-family: Arial; font-size: 12px;">

    <div style="width: 100%;" id="mapDiv">
        <div id="map" style="width: 70%; height: 600px; float: left;margin:0px;color:black;"></div>
        <div id="panel" style="width: 30%; float: left;margin:0px;"></div>
    <script type="text/javascript">

     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
               mapTypeId: google.maps.MapTypeId.ROADMAP


     var request = {
       origin: 'Mumbai',
       destination: 'Navi Mumbai',
       travelMode: google.maps.DirectionsTravelMode.DRIVING

     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {

Here instead of using hard coded value you can create string at controller level and pass here.

origin: {!start address }
destination:- {end address}

Source :-