Recently I have had a small dilemma, because I needed to load in a web page, a list of locations with the associated map image. Google maps is very good but overload too much the page with JavaScript, I only need images and not one complete map container because possibly the page need display ten or more map images.
I could read the Yahoo Map Image API, is perfect for my project because I only download a simple gif image, the problem is that, first, in the API help only we can see the output of the rest call in XML and PHP stringfy. This is a problem for me because the IP limitation of Yahoo and Google API's requires that in big projects must be the users that they query the API using JavaScript, because if I use the server, the API blocks the calls when I pass the max number of calls.
Well, using JavaScript I have two possibilities, call the API with XML responses (problem with XMLHttpRequest domain restrictions, it is neccesary a proxy and the same problem with the IP calls in the proxy server), or a hidden possibility with JSON responses calling with scripts tags (not AJAX).
Althought Yahoo Map Image API doesn't show any possibility about JSON, all REST API calls of Yahoo share the same parameters, so I tried the params "&output=json&callback=myfunction" and voilà I have the JSON response. With the callback function I can execute a function from my code receiving as params the API response.
The problem now is making multiple calls asyncronously to the API. The callback function doesn't know the related image for to associate the src url of the map image (or associate div). So I thought in one solution, this is a small code of a extension for load multiple map images by ID.
var yahoo = {
calls: new Array(),
apikey: "YahooDemo",
callImageApi: function(latitude, longitude, imgobj, iwidth, iheight){
iwidth = (typeof iwidth != "undefined")?iwidth:"70";
iheight = (typeof iwidth != "undefined")?iheight:"70";
var index = yahoo.calls.push([imgobj, function(data){
this[0].src = data.ResultSet.Result;
}]) - 1;
var miscript = document.createElement("script");
miscript.src = "http://local.yahooapis.com/MapsService/V1/mapImage?appid=YahooDemo&latitude="
+latitude+ "&longitude="
+longitude+ "&image_height="
+iheight+"&image_width="
+iwidth+"&output=json&callback=yahoo.calls["
+index+"][1]";
miscript.type = "text/javascript";
head = document.getElementsByTagName("head")[0];
head.appendChild(miscript);
}
}
With this HTML of example, we can call to the library using yahoo.callImageApi(latitude, longitude, imageobj, width, height):
yahoo.callImageApi("36.8402","-2.46792", document.getElementById("test1"),300,300);
yahoo.callImageApi("38.01504422431762","-1.1742335557937622", document.getElementById("test2"),400,400);
Download the example.
Labels: javascript, programming