2

Hi Salesforce community,

I've been going through the visual force workbook and I've encountered an error with the findNearbyWearHouses app.

I've copied all the code at the end of the tutorial, but the page does not render, I simply get a blank page.

I've gone over to see if all the curly brackets match and I went through the code line by line to see if it matches and it does.

This feels mildly discouraging, but it's probably something stupid and non-deterministic of my coding skills

Here's my code, could anyone spot an error? 

    <apex:page sidebar="false" showheader="false"
    standardController="Warehouse__c" recordSetVar="warehouses"
    extensions="WarehouseUtils">

    <apex:includeScript value="{!$Resource.googleMapsAPI}" />

  <style>
        html, body { height: 100%; }
        .page-map, .ui-content, #map-canvas { width: 100%; height:100%; padding: 0; }
        #map-canvas { height: min-height: 100%; }
    </style>

    <script>
        function initialize() {
        var lat, lon;

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position){
            lat = position.coords.latitude;
            lon = position.coords.longitude;

            Visualforce.remoting.Manager.invokeAction(
                '{!$RemoteAction.WarehouseUtils.findNearbyWarehouses}',
                lat, lon,
                function(result, event){
                    if (event.status) {
                        console.log(result);
                        createMap(lat, lon, result);
                    } else if (event.type === 'exception') {
                        //exception case code
                    } else {
                    }
                },
                {escape: true}
            );
        });
    } else {
        lat = 37.77493;
        lon = -122.419416;

        var result = [];
        createMap(lat, lon, result);
        }
    }


function createMap(lat, lon, warehouses){
    var currentPosition = new google.maps.LatLng(lat,lon);
    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
        center: currentPosition,
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    var positionMarker = new google.maps.Marker({
        map: map,
        position: currentPosition,
        icon: 'https://maps.google.com/mapfiles/ms/micons/green.png'
    });

    var mapBoundary = new google.maps.LatLngBounds();
    mapBoundary.extend(currentPosition);

   var warehouse;
    for(var i=0; i<warehouses.length ; i++) {
        warehouse = warehouses[i];
        console.log(warehouses[i]);
        setupMarker();
    }

    map.fitBounds(mapBoundary);

    function setupMarker(){
        var warehouseNavUrl;

        try{
            if(sforce.one){
                warehouseNavUrl = 'javascript:sforce.one.navigateToSObject(\'' + warehouse.Id + '\')';
            }
        } catch(err) {
                console.log(err);
                warehouseNavUrl = '\\' + warehouse.Id;
        }

        var warehouseDetails =
            '<a href="' + warehouseNavUrl + '">' +
            warehouse.Name + '</a><br/>' +
            warehouse.Street_Address__c + '<br/>' +
            warehouse.City__c + '<br/>' +
            warehouse.Phone__c;

        var infowindow = new google.maps.InfoWindow({
            content: warehouseDetails
        });

        var marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng(
                warehouse.Location__Latitude__s,
                warehouse.Location__Longitude__s)
        });
        mapBoundary.extend(marker.getPosition());

        google.maps.event.addListener(marker, 'click', function(){
            infowindow.open(map, marker);
        });
    }
}

      // Fire the initialize function when the window loads
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

    <body style="font-family: Arial; border: 0 none;">
        <div id="map-canvas"></div>
    </body>

</apex:page>
Improve this question
1
  • Can you post your extension class code here so that we could try to figure out where it went wrong. Also by which way you are invoking this page? /apex/pagename or /apex/pagename?id=xxxxxxxxxxxxxxx
    – Vigneshwaran G
    Commented Jun 27, 2015 at 16:44

1 Answer 1

Reset to default
1

You can use this Code which i have implemented on Account Detail Page.

<apex:page standardController="Account">

<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() {

  var myOptions = {
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}";

  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingCountry}"
  });

  geocoder.geocode( { address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

        //create map
        map = new google.maps.Map(document.getElementById("map"), myOptions);

        //center map
        map.setCenter(results[0].geometry.location);

        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Account.Name}"
        });

        //add listeners
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        google.maps.event.addListener(infowindow, 'closeclick', function() {
          map.setCenter(marker.getPosition()); 
        });

      }

    } else {
      $('#map').css({'height' : '15px'});
      $('#map').html("Oops! {!Account.Name}'s billing address could not be found, please make sure the address is correct.");
      resizeIframe();
    }
  });

  function resizeIframe() {
    var me = window.name;
    if (me) {
      var iframes = parent.document.getElementsByName(me);
      if (iframes && iframes.length == 1) {
        height = document.body.offsetHeight;
        iframes[0].style.height = height + "px";
      }
    }
  }

});
</script>

<style>
#map {
  font-family: Arial;
  font-size:12px;
  line-height:normal !important;
  height:250px;
  background:transparent;
}
</style>

</head>

<body>
<div id="map"></div> 
</body>

you have to do only one thing just replace field name in this code to your WareHouse Object fields.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .