03.10
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 :
[javascript]
// 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.body.appendChild(script);
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) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: customer_name
});
} else {
return;
}
});
};
[/javascript]
- Prodeos_LoadGoogleMaps :
[javascript]
document.initialize();
[/javascript]
Into the Customer form, we need to place a new html component 
And also implement the methods into the events. First, binding the Prodeos_GeoMap with the onLoad event of the form 
And then, binding the Prodeos_LoadGoogleMaps to every field that will update the map when changed (e.g. : address, city, country…) 
Package file to import in Aras
Google Map integration for Aras Innovator (97)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
LinkedIn
SlideShare
Twitter
Youtube