(Eng) Tech – Integrate Google Map in Customer form in Aras Innovator

Posted on March 10, 2011


Following the recent article about how easy it was to customize an Aras Innovator form to integrate QRcode, today we publish a guide writen by Anthony Ponceot about the integration of Google Map in Aras Innovator. The aim of this quick guide is to show how easy it is to integrate features into Aras innovator using 3rd parts. In this example, we will integrate a map to the customer form ItemType using Google Maps Javascript API V3 (http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/). We have chosen Google but of course you can do the same with Bing Maps, Yahoo Maps or any other Map service that provides an API.

The specification of this addon includes the following points

  • Only integrates innovator methods and forms events
  • The map will be updated when loading the form
  • The map will be updated real time when updating the fields related to the address
  • We do not want to store the GPS coordinates in an item property. The address will be geocoded every time the form is updated, avoiding legacy data.

Here is the result :


In order to do implement this functionality, we will create 2 methods, one implementing the functions of geocoding and calling Google Maps API and the other will be calling the function and be linked to controls events.

  • Prodeos_GeoMap :
// Dynamic load of Gmaps API

// There is a callback in this API that will fire 'document.initialize' afer beeing loaded

var script = document.createElement("script");

script.type = "text/javascript";

script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=document.initialize";


document.initialize = function(){

// Initialize Geocoding service

var geocoder;

geocoder = new google.maps.Geocoder();

// MapDiv is the html element of the form

var mapDiv = document.getElementById('map-canvas');

// Creating the map

map = new google.maps.Map(mapDiv, {

zoom: 15,

mapTypeId: google.maps.MapTypeId.ROADMAP


// Fetching form informations in order to build the address

var adresse = document.getElementsByName("address")[0].value;

var city = document.getElementsByName("city")[0].value;

var zip = document.getElementsByName("zip_code")[0].value;

var pays = document.getElementsByName("country")[0].value;

var customer_name =  document.getElementsByName("name")[0].value;

var adresse_complete = adresse + ", " + zip + " " + city + ", " + pays;

// Geocode the address

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

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


var marker = new google.maps.Marker({

map: map,

position: results[0].geometry.location,

title: customer_name


} else {





  • Prodeos_LoadGoogleMaps :

Into the Customer form, we need to place a new html component ArasGmap2 And also implement the methods into the events. First, binding the Prodeos_GeoMap with the onLoad event of the form ArasGmap3 And then, binding the Prodeos_LoadGoogleMaps to every field that will update the map when changed (e.g. : address, city, country…) ArasGmap4

Package file to import in Aras

{title} ({hits})

About Anthony Ponceot

Working in CAD/PLM for 6 years…
In my early career, I developed a PDM software in a design desk for a small industrial company handling CAD data, manufacturing shop data, planning and project data. Written with .Net and MySQL database.
Then, I joined a CAD VAR reselling Siemens PLM products and Autodesk products. I add the pleasure to work with some major french companies in industrial or consumer goods industry providing technical support, advanced training, data management implementations or specific software development.
My goal is now to expand my skills in PLM area.
You can join my LinkedIn network right here : http://www.linkedin.com/in/anthonyponceot

Yoann Maingon

Yoann Maingon is an Entrepreneur and a PLM enthousiast. He is our main blogger at Minerva as he has been publishing articles about General PLM concepts and Aras Innovator for more than three years.

More Posts

Download Aras Innovator