Coordinates in Visualforce map results in different location to Google maps

Question

I am using the apex:map component in a Visualforce page. I can successfully render a map using coordinates pulled through an apex class.

However, the resulting location on the Visualforce page is slightly different to that shown if I put the same coordinates directly into Google Maps. (See maps below)

Does anyone know why this is happening?

VF page map code

<!-- Display the address on a map -->
        <apex:map width="600px" height="400px" mapType="roadmap" zoomLevel="17" center="{!program.Location__r.LatitudeTEXT__c},{!program.Location__r.LongitudeTEXT__c}">
            <apex:mapMarker title="" position="{!program.Location__r.LatitudeTEXT__c},{!program.Location__r.LongitudeTEXT__c}"/>
        </apex:map>

Thanks

Visualforce Page Map

(you can see the coordinates returned from the apex class just above the map - these are what the map is using.)

Google Map

(notice coordinates are the same as the VF page, but pin location is different)

Answer 1

This is pretty strange given they are both using google maps. I was able to repeat your problem (though actually the map marker was to the north and west, not exactly where yours was) and with a different lat/lon as well.

I got google maps and the apex map to work only when they were much less granular 17.4, 78.4 But that is not super helpful!

It feels like there is some calculation error that is creeping in on the Salesforce side of things. But there code is pretty difficult to troubleshoot as it's all in an iframe (and not sure quite what to do about it).

Answer 2

I did get an answer on this. You need to specify like the below when using latitude and longitude. Reason being that if you just use plain text, google interprets this as an address string, which geocoding then seems to "move" on the map. Where as specifying them as lat,long means that google doesn't do any geocoding and the marker lands in the right place.

center="{latitude: 17.415886, longitude: 78.405906}"

NOT

center="17.415886, 78.405906"

See my finished code below.

<!-- Display the address on a map -->
                <apex:map width="400px" height="200px" mapType="roadmap" zoomLevel="16" center="{latitude:{!program.Location__r.LatitudeTEXT__c},longitude:{!program.Location__r.LongitudeTEXT__c}}">
                    <apex:mapMarker title="{!program.Location__r.Name}" position="{latitude:{!program.Location__r.LatitudeTEXT__c},longitude:{!program.Location__r.LongitudeTEXT__c}}"/>
                </apex:map>