+ Start a Discussion
Baktash H.Baktash H. 

Does VF support Google Maps API V3?

Hello, i tried to implement simple map into a visual force page from this tutorial: http://code.google.com/intl/en/apis/maps/documentation/javascript/tutorial.html It simply doesn't work. Maybe because it is V3? Because this example with the old version works: http://wiki.developerforce.com/page/Code_Samples#Google_Maps_API_mashup_for_Leads.2C_Contacts_and_Accounts But google say they no longer support V2 and developers should use V3. Maybe you can help me. Thanks in advance.
Starz26Starz26

it does...

 

 

Here is my JS to initialize the map in a div on the page...

 

function mapinitialize(add, i) {

    var address = add; 
    var latlng;
    var geocoder = new google.maps.Geocoder();
    
    geocoder.geocode( { 'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        latlng = results[0].geometry.location;
 //     alert(latlng);
        
           var myOptions = {
                zoom: 6,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var eleID = "map_test" + i;
            var map = new google.maps.Map(document.getElementById(eleID),
                myOptions);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });

        } else {
            if( status == google.maps.GeocoderStatus.ZERO_RESULTS){
                j$("[id$=map_test" + i + "]").css('display','none');
                j$("[id$=map_error" + i + "]").css('display','block');
            }else{
                alert("Geocode was not successful for the address: " + address + " for the following reason: " + status);
            }
        }
    });
    

 }

 

the call in my VF page JS to the map, after I create the element on the page to display it

 

mapinitialize(addy, i);

 ** I use the i variable to identify which element I am talking about as I can have many maps on the same page and dynamically create the elements and I use i to add a unique row identifier to the element..**

 

And the include for the VF page

 

<!-- Google Maps API include -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

 and an Apex class (NOT USED TO GENERATE THE MAP) it is used to calculate the distance between two addresses

 

public class googleMaps {

/** 

Code adapted from :
http://www.bulkified.com/How+to+use+the+Google+Maps+API+in+Salesforce.com

Google API is at

http://code.google.com/apis/maps/documentation/distancematrix/

There is a limit so may need to be on request only.
**/

    public String duration {get;set;}
    public Integer travelTime {get;set;}
    public Decimal distance {get;set;}

    public googleMaps(
            String address1,
            String address2) {
                
        String jsonResults = getJsonResults(address1, address2);
        jsonResults = formatJsonResults(jsonResults);
        updateJsonSections(jsonResults);
    }

    public String getJsonResults(
            String address1,
            String address2) {
        
        HttpRequest req = new HttpRequest();
        Http http = new Http();
        
        req.setMethod('GET');
        
        String url = 'https://maps.googleapis.com/maps/api/distancematrix/json'
            + '?origins=' + address1
            + '&destinations=' + address2
            + '&mode=driving'
            + '&sensor=false'
            + '&language=en'
            + '&units=imperial';
        
        system.debug('URL is = ' + url);    
        req.setEndPoint(url);
        
        HTTPResponse resp = http.send(req);
        
        String jsonResults = resp.getBody().replace('\n', '');

        return jsonResults;
    }
    
    public String formatJsonResults(String value) {
        
        system.debug('json initial value is = ' + value);
        
        value = value.replace('{', ', ');
        value = value.replace('}', ', ');
        value = value.replace('[', ', ');
        value = value.replace(']', ', ');
        value = value.replace('"', '');
        system.debug('json final value is = ' + value);
        return value; 
          
    }
    
    public void updateJsonSections(
        String jsonResults) {
        
        List<String> jsonSections = jsonResults.split(', ');
        system.debug('JSON section are = ' + jsonSections);
        for (Integer i = 0; i < jsonSections.size(); i++) {
            jsonSections[i] = jsonSections[i].trim();
            system.debug('JSON Section ' + i + ' is = ' + jsonSections[i]);
            if (jsonSections[i].contains('duration :')) {
                duration = parseDuration(jsonSections[i + 1]);
                travelTime = parseTravelTime(duration);
            }
            
            if (jsonSections[i].contains('distance :')) {
                distance = parseDistance(jsonSections[i + 1]);
            }
        }
    }

    public Decimal parseDistance(String value) {
        value = value.replace('text : ', '');
        value = value.replace(' mi', '');
        value = value.replace(' ft', '');
        value = value.replace(',', '');
        value = value.trim();
        
        return Decimal.valueOf(value);
    }
    
    public String parseDuration(String value) {
        value = value.replace('text : ', '');
        
        return value;
    }
    
    public Integer parseTravelTime(String value) {
    
        Integer tmpMinutes = 0;
    
        List<String> durationNodes = value.split(' ');
        String prevDurationNode = '';
        
        for (String durationNode : durationNodes) {
            if (durationNode == 'day' || durationNode == 'days') {
                tmpMinutes += Integer.valueOf(prevDurationNode) * 1440;
            }
            if (durationNode == 'hour' || durationNode == 'hours') {
                tmpMinutes += Integer.valueOf(prevDurationNode) * 60;
            }
            if (durationNode == 'min' || durationNode == 'mins') {
                tmpMinutes += Integer.valueOf(prevDurationNode);
            }
            
            prevDurationNode = durationNode;
        }
    
        return tmpMinutes;  
    }

}

 

 

There may be better ways to do it (probably is) but this is working for me