Avatar

Using Google Maps API

James Coleman

I'm wondering if there is a way to connect Kintone Javascript to Google Maps API so we can use their functions. I've been trying it so far with no luck.

Follow 2 followers
1

4 comments

Avatar
Yuzo Arai 2 votes
Hello James,

 

It is definitely possible to connect Kintone Javascript to Google Maps API, but there is no detail article about it.
Though it should be possible by enabling Google Maps to call document.write after onload event and loading the Google API library (https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=false).

 

I've found other documents related to map, but it's not about Google Map. This article talks about connecting OpenStreetMap to Kintone.
I will post the link below for your reference.

 

Kintone x OpenStreetMap

 

There is also a past discussion related to this topic so this might be helpful too.

 

map in kintone

 

Thank you
2
Comment actions Permalink
Avatar
James Coleman 0 votes

I have looked at those documents and what I want is not to display a map, but instead use the Distance Matrix API from Google so I can calculate the distance between two locations so we can use that to track gas mileage.

 

I'm wondering if their's a way that I can just connect to my API key and then access different API's that way such as:

 

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

var service = new google.maps.DistanceMatrixService();
0
Comment actions Permalink
Avatar
James Coleman 0 votes

I'm still working out a full solution but I found a lot more helpful examples on the Cybozu developer website. I just had to use Chrome to automatically translate the page to English from Japanese but they have a lot of good examples such as this one:

 

https://developer.cybozu.io/hc/ja/articles/202179174-Geolocation-API-%E4%BD%8D%E7%BD%AE%E6%83%85%E5%A0%B1-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%A2%E3%83%90%E3%82%A4%E3%83%AB%E7%94%A8%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%82%92%E3%81%97%E3%82%88%E3%81%86

 

I'll post a full solution once I finish

0
Comment actions Permalink
Avatar
James Coleman 6 votes

I've figured out how to connect to Google Maps API and both the Distance Matrix Service and the Geocoder. With help from this site:(Make sure you have a browser that can translate to English or whatever language you prefer).

https://developer.cybozu.io/hc/ja/articles/202640950-%E4%BD%8F%E6%89%80%E3%81%8B%E3%82%89%E5%9C%B0%E5%9B%B3%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B

 

I was able to get it started and figure out the rest. 

 

Like in the above article , I downloaded the customer database template that is already provided in Kintone. Then, instead of adding a space, I added a second label field across from the one already present and gave it a field name of address2 and changed the label header to End Address as well. 

 

Here's my full code for those that need help as well:

 

( function () {

"use strict";
// API key
var api_key = 'your_API_key_here';

// This function is how the script call to Google Maps API is loaded
function load(src) {
var head = document.getElementsByTagName('head')[ 0 ];
var script = document.createElement('script');
script.type = 'text/javascript ';
script.src = src;
head.appendChild (script);
}

// Display the geocoded location of both addresses you enter and the driving distance between the two
kintone.events.on('app.record.detail.show', function(event) {

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

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

// Display map below address field based on address information
function setLocation_address () {

// Define Google Geocoder
var gc = new google.maps.Geocoder(); //Instantiates a Geocoder object
var gd = new google.maps.DistanceMatrixService(); //Instantiates a DistanceMatrixService object

//--------------------------------------------------------------------------------
//this is where we find the record value and geocode the address and location



// get value from "address" field
var rec = kintone.app.record.get();
var addressValue = rec.record.address.value; //address = name of first address field code
var addressValue2 = rec.record.address2.value; //address2 = name of second address field code

// execute Geocoding API
if(addressValue) { //Here is the call to the API
gc.geocode ({ //Use google to see what else can be set!
address : addressValue,
language : 'ja',
country : 'JP'
}, function(results,status) {
alert(results[0].formatted_address);
alert(results[0].geometry.location);
if (status === google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
var address = results[0].formatted_address;
}

});
}
if(addressValue2) {
gc.geocode ({
address : addressValue2,
language : 'ja',
country : 'JP'
}, function(results,status) {
alert(results[0].formatted_address);
alert(results[0].geometry.location);
if (status === google.maps.GeocoderStatus.OK) {
var point = results[0].geometry.location;
var address = results[0].formatted_address;
}

});
}
if(addressValue && addressValue2) {
gd.getDistanceMatrix ({ //Here is the call to the Distance Service API
origins : [addressValue],
destinations : [addressValue2],
travelMode: google.maps.TravelMode.DRIVING,
}, function(results,status) {
if (status === google.maps.DistanceMatrixStatus.OK) {
var point = results.rows[0].elements[0].distance.text; //Outputs as km
var temp = point.split(" ")[0]; //Seperates the numbers from the letters
var iNum = parseFloat(temp); //Converts string to double/float
iNum *= 0.621371; //Finally cnverts it to miles
alert("Distance is " + iNum + " miles");
}
else{
alert("Unsuccessful");
}
});


}
}
//---------------------------------------------------------------------------------
//Don't change anything below unless you kbow exactly what you're doing!!

// Wait for Google Map to load

function waitLoaded () {
setTimeout ( function() {
timeout -= interval;
if (( typeof google !== 'undefined' )) {
setLocation_address(); // Display map based on address
} else if(timeout > 0 ) {
waitLoaded();
} else {
// abort
}
}, interval);
}
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.Tasu Src = "( [ ^ "] Tasu ) "/);
if (m) {
load(m[1]);
} else {
nativeWrite(html);
}
};

// load the Google Map API library
load('https://maps.googleapis.com/maps/api/js?v=3&key=' + api_key);

waitLoaded();

}
});

}) ();

6
Comment actions Permalink