map in kintone

hello, i would like to show a map in kintone as i wrote below.thanks

Hello Armel

I found a sample code from the Kintone site of displaying Google map of the address in a field.
This is using Google Map API so depending on how you use, it may require the Google Map API license.

// 地図表示のサンプルプログラム
// Copyright (c) 2013 Cybozu
// Licensed under the MIT License

(function () {
  "use strict";

  // レコード表示時イベントで住所フィールドの値を利用して地図を表示する
  kintone.events.on('app.record.detail.show', function (event) {

    var timeout = 10 * 1000; // ms
    var interval = 100; // ms

    var check = document.getElementsByName('map_latlng');

    if (check.length == 0) {

      // enable google maps to call document.write after onload event.
      var nativeWrite = document.write;
      document.write = function (html) {
        var m = html.match(/script.+src="([^"]+)"/);
        if (m) {
          load(m[1]);
        } else {
          nativeWrite(html);
        }
      };

      // Google Map の API ライブラリをロードします
      load('[https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false](https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false)');

      waitLoaded();
    }

    // Google Map がロードされるまで待ちます
    function waitLoaded() {
      setTimeout(function () {
        timeout -= interval;
        if ((typeof google !== 'undefined')
          && (typeof google.maps !== 'undefined')
          && (typeof google.maps.version !== 'undefined')) {
          setLocation_address(); // 住所をもとに地図を表示
        } else if (timeout > 0) {
          waitLoaded();
        } else {
          // abort
        }
      }, interval);
    }

    // 住所情報を元に、地図を「住所」フィールドの下に表示します
    function setLocation_address() {

      var locationEl_address = kintone.app.record.getFieldElement('Address');
      if (locationEl_address.length == 0) { return; }

      var check = document.getElementsByName('map_address');

      //「map_address」という要素が存在しないことを確認
      if (check.length !== 0) { return; }

      // 地図を表示する div 要素を作成します
      var mapEl_address = document.createElement('div');
      mapEl_address.setAttribute('id', 'map_address');
      mapEl_address.setAttribute('name', 'map_address');

      // 「住所」フィールドの要素の下に mapEl_address で設定した要素を追加します
      var elMap = kintone.app.record.getSpaceElement('Map');
      elMap.appendChild(mapEl_address);

      // Google Geocoder を定義します
      var gc = new google.maps.Geocoder();

      // 「住所」フィールドから値を取得します
      var rec = kintone.app.record.get();
      var addressValue = rec.record.Address.value;

      // Geocoding API を実行します
      gc.geocode({
        address: addressValue,
        language: 'ja',
        country: 'JP'
      }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

          // 地図要素のサイズを指定します
          mapEl_address.setAttribute('style', 'width: 300px; height: 250px');

          var point = results[0].geometry.location;
          var address = results[0].formatted_address;

          // 地図の表示の設定(中心の位置、ズームサイズ等)を設定します
          var opts = {
            zoom: 15,
            center: point,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scaleControl: true
          };

          var map_address = new google.maps.Map(document.getElementById('map_address'), opts);

          // マーカーを設定します
          var marker = new google.maps.Marker({
            position: point,
            map: map_address,
            title: address
          });

        }
      });

    }
  });

  // ヘッダに要素を追加します
  function load(src) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = src;
    head.appendChild(script);
  }

})();

Hope this helps.

Thanks for the sample code. it was helpful.

I also found an article about it in English.

Display maps with OpenStreetMap – Kintone Developer Program

This one uses OpenLayers to generate a map on the header space.

Obtaining header space and modifying with HTML code

var space = kintone.app.getHeaderSpaceElement();
$(space).append('<div id="map" style="width:90%; height:400px"></div>');
$('div#map').css('margin', '5px auto');

Showing the map with pin. Also displays error if location cannot be obtained.

function setPin(space, fileKeyList) {
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      zoom: 15
    })
  });

  Promise.all(fileKeyList.map(function (fileKey) {
    var fileUrl = '/k/v1/file.json?fileKey=' + fileKey;
    return getFile(fileUrl);
  })).then(function (imageBlobList) {
    return Promise.all(imageBlobList.map(function (imageBlob) {
      return getExif(imageBlob);
    }));
  }).then(function (positionList) {
    var existPosition = false;

    var minLongitude = 180, minLatitude = 90;
    var maxLongitude = -180, maxLatitude = -90;
    for (var i = 0; i < positionList.length; i++) {
      var position = positionList[i];
      // no EXIF data
      if (position === undefined || position.longitude === undefined || position.latitude === undefined) {
        continue;
      }
      existPosition = true;

      var longitude = position.longitude;
      var latitude = position.latitude;
      var coordinate = convertCoordinate(longitude, latitude);
      var marker = makeMarkerOverlay(coordinate);
      map.addOverlay(marker);

      if (longitude < minLongitude) {
        minLongitude = longitude;
      }
      if (latitude < minLatitude) {
        minLatitude = latitude;
      }
      if (longitude > maxLongitude) {
        maxLongitude = longitude;
      }
      if (latitude > maxLatitude) {
        maxLatitude = latitude;
      }
    }

    if (existPosition === false) {
      $(space).text('Cannot display the map because location information could not be obtained');
      $(space).css('text-align', 'center').css('padding', '20px');
    } else if ((minLongitude === maxLongitude) && (minLatitude === maxLatitude)) {
      map.getView().setCenter(convertCoordinate(minLongitude, minLatitude));
    } else {
      // If there are multiple coordinates, calculate the center
      var extent = ol.proj.transformExtent([minLongitude, minLatitude, maxLongitude, maxLatitude],
        'EPSG:4326', 'EPSG:3857');
      map.getView().fit(extent, map.getSize());
    }
  }).catch(function (error) {
    console.log('ERROR', error);
  });
}