Last active
August 31, 2017 09:49
-
-
Save yury-vrp/e176add4a39a07ad22f33fdcf036d636 to your computer and use it in GitHub Desktop.
Visualforce page to display google map with your current position. Tested in Salesforce1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<apex:page standardController="Account" docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="false" > | |
<style> | |
#map { | |
width: 100%; | |
height: 400px; | |
} | |
</style> | |
<div id="map">Loading map ...</div> | |
<script> | |
renderMap = function (canvas, latitude, longitude) { | |
var latLng = {lat: latitude, lng: longitude}; | |
var map = new google.maps.Map(canvas, { | |
center: latLng, | |
zoom: 14 | |
}); | |
var marker = new google.maps.Marker({ | |
position: latLng, | |
map: map, | |
title: 'You Are Here' | |
}); | |
} | |
function initMap() { | |
var mapDiv = document.getElementById('map'); | |
if (navigator.geolocation) { | |
navigator.geolocation.getCurrentPosition( | |
function (position) { | |
renderMap(mapDiv, position.coords.latitude, position.coords.longitude); | |
}, | |
function(error) { | |
document.getElementById('map').innerHTML = 'Error:' + error.code + ' x ' + error.message; | |
} | |
); | |
} else { | |
document.getElementById('map').innerHTML = 'Geolocation not supported'; | |
} | |
} | |
</script> | |
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> | |
</apex:page> |
So what is the error you get?
Maybe it has to do with HTTPS. Since version 50 chrome does not allow geolocation from unsecured pages.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This one is working in Edge IE browser and also working in Salesforce1 mobile app for iOS.
Don't know why this is not working in Chrome. Any Idea?