Skip to main content
Woohoo! Qlik Community has won “Best in Class Community” in the 2024 Khoros Kudos awards!
Announcements
Nov. 20th, Qlik Insider - Lakehouses: Driving the Future of Data & AI - PICK A SESSION
cancel
Showing results for 
Search instead for 
Did you mean: 
Alexander_Thor
Employee
Employee

Another Google Maps Extension

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

154 Replies
Alexander_Thor
Employee
Employee
Author

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.

Not applicable

Hi,

This is not working in my machine. can u tell me what might be the reason.

Not applicable

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?

Not applicable

Ok you just need to add double quotes to the values.

Regards,

Bastien.

Not applicable

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

Not applicable

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);

        });

    });

};

Not applicable

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...

Not applicable

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

Alexander_Thor
Employee
Employee
Author

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.

Not applicable

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