For some reason the marker is not showing up on this VF page.
<apex:page standardStylesheets="false" >
<div id="map-canvas" style="min-height: 400px" ></div>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var lat, lon;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
createMap(37.77493, -122.419416);
makeMarker(lat, lon)
}
)}
else
{
lat = 37.77493;
lon = -122.419416;
createMap(lat, lon)
}
}
function createMap(lat, lon) {
console.log(lat);
var mapOptions = {
center: new google.maps.LatLng(lat, lon),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
function makeMarker(lat, lon) {
var num = 1;
console.log('yes');
var myLatlng = new google.maps.LatLng(lat, lon);
console.log(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
title: 'Click to Zoom',
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter_withshadow&chld='+num+'|FF0000|000000'
});
return marker;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>