I'm wanting to be able to free-form draw on top of a map within a Salesforce page if possible. I believe this can be done but am having a hard time getting the code to work. Any help is appreciated.

    <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() {
            console.log('✵✵✵✵✵✵✵✵ initialize() ✵✵✵✵✵✵✵✵');
            var lat, lon, map, marker;
            if(navigator.geolocation) {
                    lat = position.coords.latitude;
                    lon = position.coords.longitude;
                    console.log('lat = '+lat.toString()+' - lon = '+lon.toString());
            } else{
                lat = 37.77493;
                lon = -122.419416;
                map=createMap(lat, lon);
        }//END initialize();

        function getNewMap(lat,lon) { 
            console.log('❂❂❂❂❂❂❂❂ createMap('+lat.toString()+', '+lon.toString()+') ❂❂❂❂❂❂❂❂');        
            var mapOptions = {
              center: new google.maps.LatLng(lat, lon),
              zoom: 13,
              mapTypeId: google.maps.MapTypeId.ROADMAP

            return new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        }//END getNewMap(lat,lon)

        function getNewMarker(lat,lon,map) {
            console.log('♓♓♓♓♓♓♓♓ getNewMarker('+lat.toString()+', '+lon.toString()+', '+map.toString()+') ♓♓♓♓♓♓♓♓');
            var num = 1;
            var myLatlng = new google.maps.LatLng(lat, lon);
            //var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'Click to Zoom',
            return marker;
        }//END getNewMarker(lat,lon,map)

        google.maps.event.addDomListener(window, 'load', initialize); 

    var isDrawing = false; //start drawing
        var overlay = new google.maps.OverlayView();
        overlay.draw = function () {};

// Add a listener for idle event and call getElevation on a random set of marker in the bound
        google.maps.event.addListener(map, 'click', function () {
        var polyLine = new google.maps.Polyline({
        map: map
    $("#map").mousemove(function (e) {
        var pageX = e.pageX;
        var pageY = e.pageY;
        var point = new google.maps.Point(parseInt(pageX), parseInt(pageY));

        var latLng = overlay.getProjection().fromDivPixelToLatLng(point);


        });//end of drawing

  • 2
    Did you take a look at apex:maps that came out in spring 15. mstsolutions.com/blog/content/… this new feature may help you better than cumbersome js – Rao Apr 1 '15 at 22:04
  • Did you understand how to draw on a google map inside a VF Page? I'm running in the same issue and I don't find solutions – L.benedettini Aug 5 '16 at 8:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.