How do I add a map to the form view? : Portal

Start a new topic

Answered

How do I add a map to the form view?

Subham Dixit

started a topic about 2 years ago

In a demo, I saw you can embed a Google maps to show the location of a customer. How do I add a map to the front-end application?

Best Answer

Subham Dixit said about 2 years ago

There a few steps to get Maps working in a form. Here is an example (it is a good idea to save the form after each configuration step):

Add a Form Field to a container in a form, then set the Component Type to "Object":

Ensure that the Source Type is set to "Object":

You should now be able to edit the Values column on the form by clicking the ellipses button:

SemQL expression defines how to link to Maps with the address you wish to move. You will need to modify to ensure that varAddress is built from your data:

Here is an example:

'<!DOCTYPE html>
<html>
  <head>   
    <meta charset="utf-8">
    <script src="http://maps.googleapis.com/maps/api/js?v=3.16"></script>;
    <script>
var address= "' || GeocodedAddress.StreetNumber || ' ' || GeocodedAddress.StreetName || ', ' || GeocodedAddress.Locality || ', ' || GeocodedAddress.State || ' ' || GeocodedAddress.Country || '"
var zoom = 14;
// mapType
// ROADMAP displays the normal, default 2D tiles of Google Maps.
// SATELLITE displays photographic tiles.
// HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
// TERRAIN
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,
    opacity: 0.85,
    title: "' || CompanyName || '" + String.fromCharCode(13) + "' || GeocodedAddress.StreetNumber || ' ' || GeocodedAddress.StreetName || '" + String.fromCharCode(13) + "' || GeocodedAddress.Locality || ', ' || GeocodedAddress.State  ||'"
    });
  }
  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>'

1 Comment