Sign Up ›
  • Bahu_SFDC
  • NEWBIE
  • 0 Points
  • Member since 2014
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
4 replies

Anyone can help me out to integrate Salesforce with OpenStreetMap. If anyone done with this please let me know.

I am trying to integrate Salesforce with OpenStreetMap but unable to do so.Below is my code but it's not working properly.
<apex:page standardController="Lead" >
    <html>
        <head>
            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script src="//www.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=Fmjtd%7Cluur21uy29%2Cb5%3Do5-90twu6"></script>           
            <script type="text/javascript">
           
                var mapQuestAPIKey = "Fmjtd%7Cluur21uy29%2Cb5%3Do5-90twu6";
                var recordName = "{!Lead.Name}";
                var addressToGeocode = "{!Lead.BillingAddressStreetNumber__c},{!Lead.Community__r.Postcode__c},{!Lead.Community__r.Country__c}";
                var latLngInfo;
                function constructMapQuestGeocodingURL (apiKey, location) {alert('aa');
                    return "//open.mapquestapi.com/geocoding/v1/address?key=" + apiKey + "&location=" + encodeURI(location);
                }
                 console.log('aaaa');
                function geocodeAndRenderMap(){
                    jQuery.ajax(
                        {
                            url :
                                constructMapQuestGeocodingURL(
                                    mapQuestAPIKey,
                                    addressToGeocode
                                ),
                            method : "GET",
                            success :
                                function (data, textStatus, jqXHR){
                                    if(
                                        data.info.statuscode == 0 &&
                                        data.results[0].locations[0] != undefined
                                    ){
                                        latLngInfo = data.results[0].locations[0].latLng;
                                        createMap(latLngInfo);
                                    }
                                },
                            error:
                                function (jqXHR, textStatus, errorThrown){
                                    alert(errorThrown);
                                }
                        }
                    );
                }

                function createInfoWindow(latLngInfo){
                    window.poi = new MQA.Poi(latLngInfo);

                    poi.setRolloverContent(recordName);
                    poi.setInfoContentHTML(addressToGeocode);
                    map.addShape(poi);
                    poi.toggleInfoWindow();
                }

                function createMap(latLngInfo){
                    var options = {
                        elt: document.getElementById('map'),
                        zoom: 8,
                        latLng: { lat: latLngInfo.lat, lng: latLngInfo.lng },
                        mtype: 'osm',
                        bestFitMargin: 0,
                        zoomOnDoubleClick: true
                    };
                   
                    window.map = new MQA.TileMap(options);
                    
                    MQA.withModule(
                        'largezoom','viewoptions','geolocationcontrol','mousewheel',
                        function() {
                            map.addControl(
                                new MQA.LargeZoom(),
                                new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5,5))
                            );

                            map.addControl(new MQA.ViewOptions());

                            map.addControl(
                                new MQA.GeolocationControl(),
                                new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT, new MQA.Size(10,50))
                            );

                            map.enableMouseWheelZoom();
                        }
                    );

                    createInfoWindow(latLngInfo);
                }

                geocodeAndRenderMap();
            </script>
        </head>
        <body>
            <div id="map" style="width:300px; height:300px;"></div>
        </body>
    </html>
</apex:page>