Another Google Maps Extension

[Alexander_Thor]

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

[sudeepkm]

Hi Alexander,

Thanks a lot for posting this file. I could not find the Properties.qvpp file in the qar file you have attached (Map_infowindow). Can you please see if you can share the qvpp file of Map_infowindow.qar? Also

instead of "Expression Value" text [var mTitle = 'Expression Value ' + row[2].text;] i want to show the Chart Expression Label when an user mouse over or click on the location pin on the map. Kindly see if you can provide any advice.

Thanks and Regards,

Sudeep

[Alexander_Thor]

Hi Sudeep,

You want the HeaderRows field, I have not tried this so it's a bit psuedo code but should get your started.

Looked at the API and it seems we want it as a two-dimensional array, strange as row number should always be 0...

var header = this.Data.HeaderRows [0];

For loop

var mTitle = 'Expression label: ' + header[2].text;

End For loop

Also I deleted the properties file, you only need to define your lat and lng fields as dimensions and setup your expression the goold ol' fashioned way

[willianpultz]

Hello ..

I am needing to change the icon that is shown on the map, for example, active and inactive customer, when the point is to show a client an active orange icon, if inactive show a blue icon.

Anyone have an example to suit my need or could give me any tips.

Thank you.

[#5]

i AM unable to locate the extension object folder location on my desktop edition personal

[dirk1955]

Hi guys,

I wonder if it would be possible to change the location indicator on the map.

Why.

I combine 2 files with camper-van parking areas in Europe.

File 1: official places

File 2: unofficial places

I would like to use an icon for the places of file 1 and an other one for the places of file 2.

Is this possible?

If yes, how?

THX

Dirk

[#7]

Hi Dirk,

This is possible, you can use two methods for it (as far as I know):

1) You can put a variable in the filename string:

icon: 'http://www.dropbox.com/link/'+Flag+'.png'

So you just load in a field from Qlikview that contains the filename, that's an easy way if you have a lot of different images.

2) You an use an if statement in the icon value:

if (CategoryVar.search(/Hotels/i)>-1)

                                                  {

                                                  var iconvar = 'http://i.minus.com/iICO2wuRABnNG.png';

                                                  }

else

                                        {

                                                  var iconvar = 'http://i.minus.com/ibyXZJjhXBgQQ7.png';

                                        }

Then for the icon, you just put:

var marker = new google.maps.Marker({

                                                  position: latLng,

                                                  map: Map,

                                                  icon: iconvar,

                                                  title:City });

Let me know if you have trouble implementing this. Are you dutch by the way?

Cheers,

Adriaan

[dirk1955]

Hi,

Yes Adriaan, i'm dutch.

And yes i have trouble implementing this.

In the javascript listed below i can't find the icon value.

Or is there a better script?

java script:

//Google Maps APIv3 with MarkerCluster v2.0.1
//Created by Alexander Karlsson - akl@qlik.com - QlikTech Nordic AB
//Tested on QV11
//
//QlikTech takes no responsbility for any code.
//Use at your own risk.
//Do not submerge in water.
//Do not taunt Happy Fun Ball.

var r=Math.floor(Math.random()*10001);
var divName = "div" + r;

loadLibs();

function loadLibs() {
Qva.LoadScript('http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.1/src/markercl...', function () {
Qva.LoadScript('https://maps.google.com/maps/api/js?sensor=false&callback=Map_Done')
});
};

function Map_Done() {
    Qva.AddExtension("Map_infowindow", function() {
  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(59.315605, 17.951835);
  var center = new google.maps.LatLng(50.13436, 3.33473);
 
  //Draw map - Change options to suit your needs.
  var map = new google.maps.Map(document.getElementById(divName), {
  zoom: 5,
  center: center,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var infoList = []; 
  var markers = [];

        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 mTitle = 'Expression Value ' + row[2].text;
   var mTitle = row[2].text;

  
   var marker = new google.maps.Marker({
    position: latLng,
    title: mTitle
   });

   marker.infoWindow = new google.maps.InfoWindow({
        content: mTitle
      });

      google.maps.event.addListener(marker,'click',function() {
        infoList.push(this);
        this.infoWindow.open(map,this);
      });

   markers.push(marker); 
        };
 
  var mcOptions = {gridSize: 30, maxZoom: 15};
        var markerCluster = new MarkerClusterer(map, markers, mcOptions);

});
};

[#9]

I already thought so, I'm Belgian.

Replace:

  var marker = new google.maps.Marker({

    position: latLng,

    title: mTitle

   });

By:

  var marker = new google.maps.Marker({

    position: latLng,

     icon: 'webadres of the icon',

    title: mTitle

   });

[dirk1955]

I'm Belgian to.

So then i have to define 2 var markers.

1. for the official parking places (var markerOff)
2. for the non official (var markerN_Off)

How can i make the script choose the right icon?

I'm not a Java script men you know.

[#11]

if (Type = OfficialParking)

                                                  {

                                                  var iconvar = 'http://markerOff';

                                                  }

else

                                        {

                                                 var iconvar = 'http://markerOn';

                                        }

Then for the icon, you just put:

var marker = new google.maps.Marker({

    position: latLng,

     icon: iconvar,

    title: mTitle

   });