Skip to content

Instantly share code, notes, and snippets.

@yury-vrp
Last active August 31, 2017 09:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yury-vrp/e176add4a39a07ad22f33fdcf036d636 to your computer and use it in GitHub Desktop.
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
<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>
@amulhai
Copy link

amulhai commented Aug 9, 2017

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?

@goran-paunovic
Copy link

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