+ Start a Discussion
Shukla_AnkitShukla_Ankit 

OpenstreetMap integration with salesforce.com

Hi All,

I want to show account address on OpenStreetMap as vf page on account detail page.Please let me know if anyone done this.
NehalNehal (Salesforce Developers) 
Hi,

Please refer to links below that will provide you with the information on OpenStreetMap:

1.http://stackoverflow.com/questions/925164/openstreetmap-embedding-map-in-webpage-like-google-maps

2.https://success.salesforce.com/answers?id=90630000000hY9GAAU

I hope this helps.
shubham singh 11shubham singh 11
This map is showing the addresses of Contacts associated with an Account

<apex:page standardcontroller="Account" sidebar="false" showHeader="false">
    <body>
        <script src="http://openlayers.org/api/OpenLayers.js"></script>
        <div id="Map" style="height:300px"></div>
        <script src="{!$resource.OpenStreetMap}"></script>
        <script>
            var i;
            var qq = 0;
            var jsConlist1 = [];
            var jsConlist2 = [];
            var fromProjection = new OpenLayers.Projection("EPSG:4326"); 
            var toProjection = new OpenLayers.Projection("EPSG:900913"); 
            var position = new OpenLayers.LonLat(4.4098518, 51.3274014).transform(fromProjection, toProjection);
            var mapoptions = {
                numZoomLevels: 6,
                controls:[
                          new OpenLayers.Control.PanZoomBar(),
                          new OpenLayers.Control.Navigation({'zoomWheelEnabled': false})
                          ]
            };
            map = new OpenLayers.Map("Map",mapoptions);
            var mapnik = new OpenLayers.Layer.OSM();
            map.addLayer(mapnik);
            var markers = new OpenLayers.Layer.Markers("Markers");
            var size = new OpenLayers.Size(26, 46);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('{!$Resource.Shubham}', size, offset);
            map.addLayer(markers);
            var trackMarker = new OpenLayers.Marker(position, icon);
            markers.addMarker(trackMarker);
            map.setCenter(position,8); 
            var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
            
            var feature = new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Point(4.8713153, 51.1527623).transform(fromProjection, toProjection),
                {description: ''},
                {externalGraphic: '{!$Resource.Shubham}', graphicWidth: 26, graphicHeight: 46, graphicXOffset: -13, graphicYOffset: -46}
            );
            vectorLayer.addFeatures(feature);
            var feature = new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Point(3.62127129, 51.3180519).transform(fromProjection, toProjection),
                {description: ''},
                {externalGraphic: '{!$Resource.Shubham}', graphicWidth: 26, graphicHeight: 46, graphicXOffset: -13, graphicYOffset: -46}
            );
            vectorLayer.addFeatures(feature);
            
            
            <apex:repeat value="{!Account.Contacts}" var="add1" >
                jsConlist1.push("{!(add1.Contacts.Location__Longitude__s)}");
                jsConlist2.push("{!(add1.Contacts.Location__Latitude__s)}");
                qq++;
            </apex:repeat>
            
            for (i = 0; i < qq; i++) {
                var feature = new OpenLayers.Feature.Vector(
                    new OpenLayers.Geometry.Point(jsConlist1[i],jsConlist2[i]).transform(fromProjection, toProjection),
                    {description: ''},
                    {externalGraphic: '{!$Resource.client_marker}', graphicWidth: 26, graphicHeight: 46, graphicXOffset: -13, graphicYOffset: -46}
                );
            }
            vectorLayer.addFeatures(feature);
            map.addLayer(vectorLayer);
        </script>
    <div>
        <img src="{!$Resource.MapQuestLogo}" />
    </div>
    </body>
</apex:page>
I hope this wil help you.
Emanuele de Jesus 2Emanuele de Jesus 2
Hi guys.
When I try to use http://openlayers.org/api/OpenLayers.js in a Visualforce page I have the following error: 
This request has been blocked; the content must be served over HTTPS.

Did this happen to you? How did you solve this?

Thank you.