Embed a Google map in a form

The Google Geocoding service data must be used to display maps rendered with the Google Maps service.

You can display such a map in Semarchy xDM in a form, by embedding generated HTML and JavaScript.

  1. Create a new form field with the SemQL expression given below.

  2. In the SemQL expression, modify the following line to concatenate your address information:

var address= "' || AddressLine || ' ' || PostalCode || ' ' || City || '";

  1. If you are a Google Maps API for Work customer, modify in the code the URL to the Google Maps service to include your Google Client ID. Note that the embedded map will stop working after adding the client ID. You must register authorized URLs with Google by following the instructions given in the Google Maps API for Work site:

<script src="https://maps.googleapis.com/maps/api/js?client=YOUR_CLIENT_ID&v3.20&sensor=false"></script>

  1. Edit the field:

    • In the Display Properties, Set the Component Type to Object, and in Data, set the Source Type to Content.
      This configuration tells Semarchy xDM to interpret this code as HTML and JavaScript on the browser.

'<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script>

/* Modify the line below */
var address= "' || AddressLine || ' ' || PostalCode || ' ' || City || '";

var zoom = 18;
var mapType = google.maps.MapTypeId.ROADMAP;
var useMarker = true;
var map;

function initialize() {
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode( { "address": address}, function(results, status) {
	 if (status == google.maps.GeocoderStatus.OK) { displayMap(results[0].geometry.location); }
	});
	window.onresize = resize;
}

function displayMap(latlng) {
	var mapOptions = { zoom: zoom, center: latlng, mapTypeId: mapType }
	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	if (useMarker) {
		var marker = new google.maps.Marker({ map: map, position: latlng});
	}
	resize("");
}

function resize(e) {
	var center = map.getCenter();
	map.getDiv().style.height = window.innerHeight +"px";
	map.getDiv().style.width = window.innerWidth +"px";
	google.maps.event.trigger(map, ''resize'');
	map.setCenter(center);
}

google.maps.event.addDomListener(window, "load", initialize);
    </script>
  </head>
  <body style="margin:0px;">
    <div id="map_canvas" style="margin:0px;"></div>
  </body>
</html>'