Build a World Map Visualforce Page Without Writing any Code!

How to build an engaging, interactive world map report with Visualforce, the Google GeoChart API, a single standard report and Salesforce URL hacking without being a Salesforce developer.

The purpose of this user guide is to demonstrate how you can quickly and easily create an interactive world map with Visualforce which leverages Salesforce reports and the Google GeoChart API to deliver a custom page that wouldn’t be achievable via the standard Dashboard functionality.

You don’t need to be a Salesforce developer to achieve this objective. You will learn some HTML, CSS, become more familiar with the Google GeoChart API and Visualforce from reading this guide, and hopefully it will give you some ideas about to leverage these technologies, and other charting tools, further to deliver attractive custom reports.

The tangible end result of all of this is that you will be able to create a stunning ‘world map’ Visualforce page, which can be have different countries or continents clicked on to display Salesforce report data.

Download the full guide here..

Subscribe To The Monthly Newsletter

No Spam. No Rubbish. Just great content from the Salesforce Industry.

You have Successfully Subscribed!

7 thoughts on “Build a World Map Visualforce Page Without Writing any Code!

  1. Is there a way to do the same thing but with just the U.S. and by state? Or how about by state and then by zip code?

  2. Hi Vince,

    Absolutely. As per page 4 of the guide, the link (I don’t think the hyperlink is working in the downloaded guide) is here – and this shows you the different options you can choose for params 1, 4 and 8.

    Let’s say you want a US map, state by state. You get the state codes from here:

    Your template is here:

    function drawVisualization() {var data = new google.visualization.DataTable();

    data.addColumn(‘string’, ‘Country’);
    data.addColumn(‘number’, ‘Value’);
    data.addColumn({type:’string’, role:’tooltip’});var ivalue = new Array();

    ivalue[‘US-MO’] = ”;

    var options = {
    backgroundColor: {fill:’#FFFFFF’,stroke:’#FFFFFF’ ,strokeWidth:0 },
    colorAxis: {minValue: 0, maxValue: 0, colors: [‘#6699CC’]},
    legend: ‘none’,
    datalessRegionColor: ‘#f5f5f5’,
    displayMode: ‘regions’,
    enableRegionInteractivity: ‘true’,
    resolution: ‘provinces’,
    sizeAxis: {minValue: 1, maxValue:1,minSize:10, maxSize: 10},
    keepAspectRatio: true,
    tooltip: {textStyle: {color: ‘#444444′}, trigger:’focus’, isHtml: false}
    var chart = new google.visualization.GeoChart(document.getElementById(‘visualization’));
    chart.draw(data, options);

    As you can see, param 8 is ‘US’ and not ‘world’ as per the example in the guide. Also, ‘US-MO’ is the state for Missouri.

    So what if you wanted a map of Australia instead? Your param 8 will be, as per:, will be ‘AU’.

    I hope that helps. If you think another guide with more examples would be helpful, just post a comment.


  3. Great! I`ll try that!
    However, you have to be clear with people who does not know SF so much. Some features in Salesforce are impossible to be done without code, so for that one, you don`t need to write code, but copy and paste.

    Congs. again !!!

  4. cool…but, can it go further? I have data at the county and zip code level in Missouri and Alabama. Can I show Opportunities visually by county? or a heat map by zip code? From what I saw in the links, looks like I can do MSA and State, but didn’t see any codes for counties. I can work with ESRI mapping, but this looked like it might allow me to do it easier right in SFDC. thanks!

  5. Hi Jim,
    That is a really good question. I came across this link, and the short answer is ‘yes – you can use counties with Google GeoCharts however, it’s not as straight forward’:!topic/google-visualization-api/KVGu–jjUpk.

    “you can create custom maps for the GeoChart, however it gets a tad tricky. GeoChart expects your maps to be named in a certain way and be in a certain format, so you would have to reverse engineer how the maps are structured in order to draw your own. You can set to your own maps source by writing google.visualization.GeoChart.setMapsSource(newSourceUrl).”

    I think this example of jsfiddle really shows the best example: – this shows the different counties from the state of Alabama.

    This is also a very good example:

Add Comment