1 2 Previous Next 21 Replies Latest reply on Oct 14, 2014 6:50 AM by AlasdairC

    [Tutorial] Google Map of Incidents

    Rookie

      Hi everyone,

      it is my first tutorial, so if something is not understandable, please tell me (:

       

      OK let's start:

      1. What's the effect of this tutrial?
      Google Map of opened incidents. In my case, it will be Poland.

       

      2. How it looks?

      It looks like this:

      ld_map.PNG

      awesome, right? (:

       

      3. How to do it in a few minutes?
      It's possible. Use my tutorial (:

       

       

      TUTORIAL

       

      Requirements:

      - Completely installed LANDesk with IIS7 and MSSQL database (known dbuser, dbname, dbpass)
      - (on server with IIS) Installed PHPManagerForIIS-1.2.0 (or newer) version x64 or x86 from [HERE]

      - (on server with IIS) Installed PHP v 5.3 (or newer) from [HERE]

      - Installed text editor like Notepad++ from [HERE]

       

      Step by step:
      1. Make new files in directory C:\inetpub\wwwroot\map

      index.php

      <!DOCTYPE html>

      <html>

          <head>

              <meta http-equiv="Content-Type" content="text/html;">

              <title>Mapa incydentów</title>

              <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language='pl'" type="text/javascript"></script>

              <script src="markerclusterer.js" type="text/javascript"></script>

              <script src="markers_m.js" type="text/javascript"></script>

              <script src="jquery-latest.min.js" type="text/javascript"></script>

                          <style>

                  html, body {

                  padding: 0;

                  margin: 0;

                  height: 100%;

                  width: 100%;

                  }

              </style>

          </head>

          <body onload="initialize();">

              <div id="map" style="height: 100%; width: 100%;"></div>

          </body>

      </html>

       

      file.php

      <?php

                //Connect to MSSQL

                $serverName = "SrvName"; //serverName\instanceName

                $db = "dbName"; //name of database

                $dbuser = "UserName"; //username of database

                $dbpass = "PassWord"; //password of database

                $code = "UTF-8"; //coding of output

                $connectionInfo = array( "Database"=>$db, "CharacterSet"=>$code, "UID"=>$dbuser, "PWD"=>$dbpass); //connecting..

                $conn = sqlsrv_connect( $serverName, $connectionInfo); //connected

       

                if( $conn ) {

                           echo "";

                }else{

                           echo "Connection could not be established.<br />";

                           die( print_r( sqlsrv_errors(), true));

                }

                //declare the SQL statement that will query the database

                $sql = "          SELECT usr_location.usr_city AS miasto, usr_location.usr_street AS ulica

                                                FROM pm_process

                                                LEFT JOIN lc_status

                                                  ON pm_process.pm_status_guid=lc_status.lc_guid

                                                LEFT JOIN im_incident

                                                  ON pm_process.pm_guid=im_incident.pm_guid

                                               RIGHT JOIN usr_location

                                                  ON im_incident.usr_location=usr_location.usr_guid

                                               WHERE lc_status.lc_title <> 'NULL'

                                                 AND lc_status.lc_title <> 'Closed'

                                      ORDER BY im_incident.im_id ASC;";

                //execute the SQL query and return records

                $stmt = sqlsrv_query( $conn, $sql );

                if( $stmt === false) {

                          die( print_r( sqlsrv_errors(), true) );

                }

          $locations = array();

                while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {

                    $locations[] = $row['ulica'].", ".$row['miasto'];

                }

                sqlsrv_free_stmt( $stmt);

          header('Content-Type: application/json');

          echo json_encode($locations);

      ?>

       

      markers_m.js

      function initialize() {

       

      //settings of map style

                var styles = [

          {

            stylers: [

                    { color: "#eeeeee" }

            ]

          },{

            featureType: "administrative.province",

            elementType: "labels",

            stylers: [

              { visibility: "off" }

            ]

          },{

            featureType: "administrative.neighborhood",

            elementType: "labels",

            stylers: [

              { visibility: "off" }

            ]

          },{

            featureType: "administrative.land_parcel",

            elementType: "labels",

            stylers: [

              { visibility: "off" }

            ]

          },{

            featureType: "administrative.country",

            elementType: "labels",

            stylers: [

              { visibility: "off" }

            ]

          },{

            featureType: "administrative",

            elementType: "labels",

            stylers: [

              { color: "#999999" }

            ]

          },{

            featureType: "administrative",

            elementType: "labels.text.stroke",

            stylers: [

              { visibility: "off" }

            ]

          },{

            featureType: "road",

            elementType: "geometry",

            stylers: [

              { lightness: 100 },

              { visibility: "simplified" }

            ]

          },{

            featureType: "road",

            elementType: "labels",

            stylers: [

              { visibility: "off" }

            ]

          }

        ];

       

       

        // Create a new StyledMapType object, passing it the array of styles,

        // as well as the name to be displayed on the map type control.

        var styledMap = new google.maps.StyledMapType(styles,

          {name: "Styled Map"});

       

       

        // Create a map object, and include the MapTypeId to add

        // to the map type control.

          var mapOptions = {

              zoom: 6,

              center: new google.maps.LatLng(52.04, 19.28), // Centering map on POLAND

              disableDefaultUI: true, // disabling main controllers

              mapTypeControl: false, // disabling map type controller

              scaleControl: false, // disabling scale controller

              navigationControl: false, // disabling navigation cotroller

                          mapTypeControlOptions: {

                            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']

                          }

          };

          map = new google.maps.Map(document.getElementById("map"),

                          mapOptions);

       

       

                                              map.mapTypes.set('map_style', styledMap);

                                              map.setMapTypeId('map_style');

       

          // setting borders of POLAND

          var punkty = [

                          new google.maps.LatLng(53.748711, 14.238281),

                          new google.maps.LatLng(53.258641, 14.425049),

                          new google.maps.LatLng(53.067627, 14.304199),

                          new google.maps.LatLng(52.975108, 14.161377),

                          new google.maps.LatLng(52.882391, 14.161377),

                          new google.maps.LatLng(52.716331, 14.425049),

                          new google.maps.LatLng(52.576350, 14.633789),

                          new google.maps.LatLng(52.375599, 14.556885),

                          new google.maps.LatLng(52.234528, 14.710693),

                          new google.maps.LatLng(52.099757, 14.699707),

                          new google.maps.LatLng(51.842566, 14.567871),

                          new google.maps.LatLng(51.618017, 14.743652),

                          new google.maps.LatLng(51.508742, 14.732666),

                          new google.maps.LatLng(51.447160, 14.963379),

                          new google.maps.LatLng(51.206883, 15.007324),

                          new google.maps.LatLng(50.889174, 14.820557),

                          new google.maps.LatLng(50.889174, 14.930420),

                          new google.maps.LatLng(51.062113, 15.095215),

                          new google.maps.LatLng(50.937662, 15.292969),

                          new google.maps.LatLng(50.805935, 15.380859),

                          new google.maps.LatLng(50.659908, 16.062012),

                          new google.maps.LatLng(50.659908, 16.369629),

                          new google.maps.LatLng(50.464498, 16.237793),

                          new google.maps.LatLng(50.120578, 16.622314),

                          new google.maps.LatLng(50.282319, 16.984863),

                          new google.maps.LatLng(50.478483, 16.875000),

                          new google.maps.LatLng(50.282319, 17.402344),

                          new google.maps.LatLng(50.275299, 17.753906),

                          new google.maps.LatLng(50.148746, 17.611084),

                          new google.maps.LatLng(49.986552, 17.863770),

                          new google.maps.LatLng(49.944150, 18.347168),

                          new google.maps.LatLng(49.731581, 18.665771),

                          new google.maps.LatLng(49.518076, 18.896484),

                          new google.maps.LatLng(49.396675, 19.072266),

                          new google.maps.LatLng(49.610710, 19.500732),

                          new google.maps.LatLng(49.439557, 19.610596),

                          new google.maps.LatLng(49.210420, 19.775391),

                          new google.maps.LatLng(49.224773, 20.104980),

                          new google.maps.LatLng(49.446700, 20.621338),

                          new google.maps.LatLng(49.317961, 20.928955),

                          new google.maps.LatLng(49.396675, 21.126709),

                          new google.maps.LatLng(49.468124, 21.434326),

                          new google.maps.LatLng(49.382373, 21.939697),

                          new google.maps.LatLng(49.174522, 22.159424),

                          new google.maps.LatLng(49.030665, 22.851563),

                          new google.maps.LatLng(49.174522, 22.763672),

                          new google.maps.LatLng(49.589349, 22.664795),

                          new google.maps.LatLng(50.373496, 23.653564),

                          new google.maps.LatLng(50.464498, 23.972168),

                          new google.maps.LatLng(50.736455, 24.016113),

                          new google.maps.LatLng(50.840636, 23.950195),

                          new google.maps.LatLng(50.903033, 24.158936),

                          new google.maps.LatLng(51.268789, 23.752441),

                          new google.maps.LatLng(51.488224, 23.598633),

                          new google.maps.LatLng(51.672555, 23.521729),

                          new google.maps.LatLng(51.849353, 23.598633),

                          new google.maps.LatLng(52.086257, 23.697510),

                          new google.maps.LatLng(52.187405, 23.411865),

                          new google.maps.LatLng(52.281602, 23.181152),

                          new google.maps.LatLng(52.476089, 23.378906),

                          new google.maps.LatLng(52.649729, 23.708496),

                          new google.maps.LatLng(52.722986, 23.818359),

                          new google.maps.LatLng(52.915527, 23.928223),

                          new google.maps.LatLng(53.363665, 23.719482),

                          new google.maps.LatLng(53.904338, 23.554688),

                          new google.maps.LatLng(54.130260, 23.499756),

                          new google.maps.LatLng(54.278055, 23.312988),

                          new google.maps.LatLng(54.335744, 23.071289),

                          new google.maps.LatLng(54.425322, 22.884521),

                          new google.maps.LatLng(54.393352, 22.598877),

                          new google.maps.LatLng(54.367759, 20.643311),

                          new google.maps.LatLng(54.444492, 19.819336),

                          new google.maps.LatLng(54.239551, 19.390869),

                          new google.maps.LatLng(54.354956, 19.171143),

                          new google.maps.LatLng(54.367759, 18.775635),

                          new google.maps.LatLng(54.521081, 18.511963),

                          new google.maps.LatLng(54.756331, 18.402100),

                          new google.maps.LatLng(54.616617, 18.753662),

                          new google.maps.LatLng(54.851315, 18.369141),

                          new google.maps.LatLng(54.838664, 17.918701),

                          new google.maps.LatLng(54.692884, 17.171631),

                          new google.maps.LatLng(54.470038, 16.314697),

                          new google.maps.LatLng(54.284469, 16.127930),

                          new google.maps.LatLng(54.194583, 15.534668),

                          new google.maps.LatLng(53.988395, 14.589844),

                          new google.maps.LatLng(53.905280, 14.258890),

                          new google.maps.LatLng(53.868725, 14.551392),

                          new google.maps.LatLng(53.768196, 14.589844),

                          new google.maps.LatLng(53.685290, 14.510520),

                          new google.maps.LatLng(53.690201, 14.375610),

                          new google.maps.LatLng(53.748711, 14.238281)

                      ];

          // border line

          var polilinia = new google.maps.Polygon({

              map: map,

              paths: [punkty],

              strokeColor: '#33ffff', //default: 99ffff

              strokeWeight: 4,

              strokeOpacity: 1,

              fillColor: '#33ffff',

              fillOpacity: 0.2

          });

       

       

          mc = new MarkerClusterer(map); //enabling grouping markers

          var geocoder = new google.maps.Geocoder();

       

       

          $.getJSON("file.php", function (data) {

              locations = data;

              j = -1;

              for (var i = 0; i < locations.length; i++) {

                  addMarker(locations[i]);

              }

          });

       

       

          setInterval(function () {

              $.getJSON("file.php", function (data) {

                  if (locations.length < data.length) {

                      locations = data;

                      j = 0;

                      console.log(locations);

                      addMarker(locations[locations.length - 1]);

                  }

              });

          }, 5000);

       

       

          function addMarker(location) {

              geocoder.geocode({ 'address': location }, function (results, status) {

                  if (status == google.maps.GeocoderStatus.OK) {

                      j++;

                      setTimeout(function () {

                          var marker = new google.maps.Marker({

                              position: results[0].geometry.location,

                              animation: google.maps.Animation.DROP,

                              icon: "marker.png",

                              map: map

                          });

                          setTimeout(function () {

                              mc.addMarker(marker);

                          }, 1500);

                      }, j * 50);

                  }

                  else {

                      alert("some problem in geocode" + status); //show ALERT if some problems occured

                  }

              });

          }

       

       

      }

       

      markerclusterer.js from attached files

      jquery-latest.min.js from attached files

      marker.png from attached files

       

      2. Test your map by this link:

      http://SrvName/map/index.php

      Hint: If map is working correctly - go to next step, if not - restart IIS and try again.
      Hint2: If u see alert with OVER_QUERY_LIMIT u will find explanation at the end of this tutorial.

       

      3. Make new gadget on dashboard where you want add your map.

      Gadget type LINK/URL and paste there you map link.

      It can not be visible in console but in WebAccess it looks awesome (:

       

      Explanation:

      OVER_QUERY_LIMIT - too much queries to google server about decoding locations.
      I will update this script soon with some workaround here.

       

      REMEMBER:

      You have to use your OWN names of tables in SQL QUERY.

      In my case I'm using locations of Configuration Items of which one is opened incident.

       

       

      GOOD LUCK !

        1 2 Previous Next