+ Start a Discussion
Shukla_AnkitShukla_Ankit 

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>
Sonam_SFDCSonam_SFDC
Hi Ankit -  Is this a javascript issue? Are you getting any error messages when you try to access this visualforce page?

Could you please elaborate on the issue you are facing so we can suggest better..
Shukla_AnkitShukla_Ankit
 User-added image
I am getting the above error message while trying to access the VF Page.
Shukla_AnkitShukla_Ankit
Failed to load resource: the server responded with a status of 403 (Forbidden) https://www.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=Fmjtd%7Cluur21uy29%2Cb5%3Do5-90twu6
aaaa NewMapTest:87
XMLHttpRequest cannot load https://open.mapquestapi.com/geocoding/v1/address?key=Fmjtd%7Cluur21uy29%2Cb5%3Do5-90twu6&location=,,. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://c.cs18.visual.force.com' is therefore not allowed access. NewMapTest:1
 
I am getting the above error message.
Bahu_SFDCBahu_SFDC
Hi Ankit, were you able to to implement the mapquest successfully?