Apex Code Development You need to sign in to do that
Don't have an account?
Shukla_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>
<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>
Could you please elaborate on the issue you are facing so we can suggest better..
I am getting the above error message while trying to access the VF Page.
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.