Deprecated
Google has now stopped its Earth API and Maps API is a paid for API nowadays. Some capabilities have also been either removed or changed. Therefore, I had to remove all examples of VizMap applications I had created. I didn’t remove the entire topic as I thought some of the code may still be useful with some modifications.
Put addresses on a map as markers
We’ve already looked at how to geoCode addresses using various APIs and how to create maps with Google Maps from Excel data. Now let’s look at using Bing Maps to put markers on a Map using an Excel worksheet as input. As usual you can find the completed example in the googleMapping.xlsm download. Before running this please check the parameter worksheet and change the filename value for the place that the application will generate a web page to something relevant for your machine. Look for the filename in the Ovi Marker html section of the Parameter Worksheet.
Ovi Maps versus Google Maps
Ovi Maps has some fairly different concepts to Google Maps and seems to have a very rich (and sometimes incomprehensible) api. However I was able to handle any difference in the javaScript in the Parameter Worksheet, so the only difference in Excel code between Ovi Maps and Google Maps is to use a different parameter block. The JavaScript is pretty different though.
Here is the Google Code
' This will take the geocoded data and mark it
Option Explicit
Public Sub googleMarkingExample()
' turns out these are all the same except for the paramer block to use
genericMarking cMarkerHtml
End Sub
versus the Ovi Code
' This will take the geocoded data and mark it
Option Explicit
Public Sub oviMarkingExample()
' turns out these are all the same except for the paramer block to use
genericMarking cOviMarkerHtml
End Sub
Although Ovi Maps says it needs a key, it seems to work without one, so I left that out.
How does it look
The Ovi Maps are gorgeous, but the popups are a bit basic and it took me ages to figure out how to attach a title to each marker. Its a built in capability in the others but you have to listen for mouseover events and build a box with Ovi. Easy enough when you know you have to.
I’ve implemented this exact same thing on other APIs as below. Take a look to compare. My recommendation is to stick with Google Maps.
The generated file is shown below
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
<style type='text/css'>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%}
</style>
<script src='http://api.maps.ovi.com/jsl.js' type='text/javascript' charset='utf-8'></script>
</script>
<script type='text/javascript'>
//--generated
function mcpherDataPopulate() {
var mcpherData = {"cJobject":[{"title":"Acme","content":"\<b\>Acme\</b\>\<br\>1600 Amphitheatre Pkwy\<br\> Mountain View\<br\> CA 94043\<br\> USA\<br\>","lat":"37.4220279","lng":"-122.0840677"}
,{"title":"Smiths","content":"\<b\>Smiths\</b\>\<br\>Boulevard de Waterloo 16\<br\> 1000 City of Brussels\<br\> Belgium\<br\>","lat":"50.838199","lng":"4.3597606"}
,{"title":"Schneider","content":"\<b\>Schneider\</b\>\<br\>Athens\<br\> Greece\<br\>","lat":"37.97918","lng":"23.716647"}
,{"title":"Jones","content":"\<b\>Jones\</b\>\<br\>Edinburgh\<br\> City of Edinburgh\<br\> UK\<br\>","lat":"55.9501755","lng":"-3.1875359"}
,{"title":"google russia","content":"\<b\>google russia\</b\>\<br\>Ulitsa Balchug\<br\> 7\<br\> Moscow\<br\> Russian Federation\<br\> 115035\<br\>","lat":"55.7469456","lng":"37.6262074"}
,{"title":"google ghana","content":"\<b\>google ghana\</b\>\<br\>Independence Ave\<br\> Accra\<br\> Ghana\<br\>","lat":"5.5659043","lng":"-0.1934785"}
,{"title":"Google India Pvt Ltd","content":"\<b\>Google India Pvt Ltd\</b\>\<br\>DLF Cyber City\<br\> Gurgaon\<br\> Haryana\<br\> India\<br\>","lat":"28.4917362","lng":"77.093139"}
,{"title":"google argentina","content":"\<b\>google argentina\</b\>\<br\>Buenos Aires\<br\> Capital Federal\<br\> Argentina\<br\>","lat":"-34.6084175","lng":"-58.3731613"}
,{"title":"google guangzhou","content":"\<b\>google guangzhou\</b\>\<br\>Tianhe District\<br\> Guangzhou\<br\> Guangdong\<br\> China\<br\> 510620\<br\>","lat":"23.1352029","lng":"113.3250301"}
,{"title":"Google Cairo","content":"\<b\>Google Cairo\</b\>\<br\>Heliopolis\<br\> Cairo\<br\> Egypt\<br\>","lat":"30.0909837","lng":"31.322709"}
]
};
return mcpherData; };
function mcpherAuthorize() {
ovi.mapsapi.util.ApplicationContext.set("authenticationToken", "<Token>");
};
//------
function initialize() {
var mcpherData = mcpherDataPopulate();
mcpherAuthorize();
if (mcpherData.cJobject.length > 0) {
var myOptions = {
center: [parseFloat(mcpherData.cJobject[0].lat), parseFloat(mcpherData.cJobject[0].lng) ],
mapTypeId: 0,
zoom : 2
};
// get parameters if any
var qparams = mcpherGetqparams();
if (qparams['zoom']) myOptions['zoom'] = parseInt(qparams['zoom']);
// create the map
var mapContainer = document.getElementById("map_canvas");
var bubbleContainer = new ovi.mapsapi.map.component.InfoBubbles();
var components = [
new ovi.mapsapi.map.component.Behavior(),
new ovi.mapsapi.map.component.TypeSelector(),
new ovi.mapsapi.map.component.ZoomBar(),
new ovi.mapsapi.map.component.ScaleBar(),
new ovi.mapsapi.map.component.Overview(),
new ovi.mapsapi.map.component.ViewControl(),
new ovi.mapsapi.map.component.RightClick(),
bubbleContainer
];
if (ovi.mapsapi.map && ovi.mapsapi.map.Display) {
var map = (window.display = new ovi.mapsapi.map.Display(mapContainer, {
components: components,
zoomLevel: myOptions['zoom'],
fading: 250, // fading duration of tiles in miliseconds
center: myOptions['center']
}));
}
// add the excel data
for ( var i = 0 ; i < mcpherData.cJobject.length;i++)
mcpherAddMarker ( map, mcpherData.cJobject[i] ,bubbleContainer);
}
};
function mcpherAddMarker(gMap, cj,bc) {
var gp = new ovi.mapsapi.geo.Coordinate( parseFloat(cj.lat), parseFloat(cj.lng));
var marker = new ovi.mapsapi.map.StandardMarker(gp);
var titleBubble ;
gMap.objects.add(marker);
marker.addListener("mouseover", function() {
titleBubble = bc.addBubble(cj.title, gp);
});
marker.addListener("mouseleave", function() {
bc.removeBubble(titleBubble);
});
if (cj.content){
marker.addListener("click", function() {
bc.addBubble(cj.content, gp);
});
}
return marker;
};
function mcpherGetqparams(){
var qparams = new Array();
var htmlquery = window.location.search.substring(1);
var htmlparams = htmlquery.split('&');
for ( var i=0; i < htmlparams.length;i++) {
var k = htmlparams[i].indexOf('=');
if (k > 0) qparams[ htmlparams[i].substring(0,k) ] = decodeURI(htmlparams [i].substring(k+1));
}
return qparams;
};
</script>
</head>
<body onload="initialize()">
"Testing Excel to Ovi mapping - http://rambings.mcpher.com"
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Summary
OVI turned out to be real nice, if a little esoteric. However the documentation for the API is confusing, overly complex and written in a strange, uninteresting syntax. That said this a nice, feature rich API. Since Yahoo Maps is going away, and Bing sucks, it is worth considering this as a contender for Google Maps. Please join us on our forum for discussion, questions and feedback.