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