Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
UPDATE 2013-03-23
It's great to see the support from the community around mapping! This thread has been great to follow and lots of fun contributions has been added.
It has however become quite crowded with different versions being discussed and it's hard to find any useful information anymore.
So I have decided to kill off this thread and at the same time I have updated the extensions and split them into 3 parts with each extension having it's own thread.
Hopefully this will make it a bit easier to find information, ask questions and share new implementions of the extension between each other.
Google Maps - Cluster
http://community.qlik.com/message/325640
Google Maps - Marker
http://community.qlik.com/message/325641
Google Maps - Heatmap (New!)
http://community.qlik.com/message/325642
If there is interest for a more collaborative development let me know and I will host the extensions up on Git.
Message was edited by: Alexander Karlsson
Yes, you could add an onclick event to the both the cluster markers and the actual pushpin.
However since Google has decided to charge quite a hefty license fee to put anything built on Google Maps API into production this sort of killed my motivation to give this extension any more love
I will be making something similar for openstreetmap, it's free!, as soon as I get some spare time.
Hi,
This is not working in my machine. can u tell me what might be the reason.
Hi,
Very cool extension!
Once I've tried changed var center = new google.maps.LatLng(-31.503629, 145.546875) but once I've done that, your exemple does not seem to work anymore...
Any idea why?
Ok you just need to add double quotes to the values.
Regards,
Bastien.
These 2 functions can be used in order to automatically center your maps and set the appropraite zoom level.
//Centers the map and fits the appropriate zoom
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
It works by first creating the variable
var latlngbounds = new google.maps.LatLngBounds();
and then whilst you are handling you data you pass the lat and long values into the object to create an array of the co-ordinants.
latlngbounds.extend(new google.maps.LatLng(lat, longi));
Once you have that done the 2 functions at the top can be used to centre and zoom. All you need to do is use the 2 functions outside of your data handling loop
Its all documented in the Google Map v3 API guide
http://code.google.com/apis/maps/documentation/javascript/reference.html
Lewis
Lewis,
Would you be so kind to share a .js example of that? I'm still trying to get my head around javascript.
And if somebody has a working example of how to use the onclick function, this is the furthest I got:
google.maps.event.addListener(marker, 'click', function() {
this.Document.Data.SelectTextsInColumn(23, false, "value");
});
I can get it working if I use an google infobox, then you click on the pin and a google infobox appears but that was the most magic I got to work.
Thanks
Edit: forget about the autocenter, I finally got it working
The code (there are probably 10 things that could be done more efficiently):
function Map_Done() {
Qva.AddExtension("TestMap",
function() {
//Check for existing map canvas.
if (this.Element.children.length == 0) {
var ui = document.createElement("div");
ui.setAttribute("id",divName);
ui.setAttribute("style","width: 100%; height: 100%");
this.Element.appendChild(ui);
}
//Define Map center
var center = new google.maps.LatLng(50.8503396,4.3517103);
var latlngbounds = new google.maps.LatLngBounds();
//Draw map - Change options to suit your needs.
var Map = new google.maps.Map(document.getElementById(divName), {
zoom: 2,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
//Create markers (cluster array removed, each marker is created individually).
for (var i = 0; i < this.Data.Rows.length; i++) {
var row = this.Data.Rows ;
var latLng = new google.maps.LatLng(row[0].text,row[1].text);
var Country = row[2].text;
var marker = new google.maps.Marker({
position: latLng,
map: Map
});
markers.push(marker);
latlngbounds.extend(new google.maps.LatLng(row[0].text,row[1].text));
}
var mcOptions = {gridSize: 15, maxZoom: 11};
var markerCluster = new MarkerClusterer(Map, markers, mcOptions);
Map.setCenter(latlngbounds.getCenter());
Map.fitBounds(latlngbounds);
var listener = google.maps.event.addListener(Map, "idle", function() {
if (Map.getZoom() > 16) Map.setZoom(16);
//google.maps.event.removeListener(listener);
});
});
};
Hi,
I took liberty of modifying the script, so it's more to what I need.
Changes:
+ placemarks have Measure as tooltip
+ circles (at placemark coordinates) scaled according do Measure
+ circle color is random
+ map type is hybrid or road map (hybrid by default)
- commented out Marker Cluster (does not work with circles added)
What I cannot make work and I'd appreciate some help:
1) I would like to add another measure which would be a placemark tooltip, but however I modify Definition.xml and Properties.qvpp - I can't get it working; neither adding a dimension or measure works for me.
How are variable names defined in Properties.qvpp (where do these ".Chart.Dimension.1.Field" come from?).
2) I tried to refactor a code a bit to be able to scale circles according to zoom level, but calling any script function from Map_Done just does not work...
Hey, this extension is really cool but it is not working for me My guess is that we use different decimal separator (we use comma instead of point). Could it be the reasom? How can i fix it?
Thanks,
Migle
Nice job! Amazing that a simple proof of concept can spawn such creativity amongst the community.
Are you running v11? The properties and definition files are alot simpler to work with from v11 and onwards.
You should be able to call outside functions within map_done, I'll check if I can get you a working sample.
I'm at v11.
As for props + defs: I think I'll open another thread, as I cannot find a developer documentation for extensions feature (there are multiple examples, but I can't get grammar definition etc.).
javascript function calls: I tried to put a loop creating points+circles as separate function (basic refactoring), so I could use map resize listener to rescale circles. To my best knowledge refactoring was ok, no errors thrown, but no output either - gmaps just zooms out to "Earth" level and no points are added.
BR,
Bart