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
S
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
S
Subham Dixit
said
about 2 years ago
Answer
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>'
Subham Dixit
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?
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:
Subham Dixit
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:
-
Extend a model with new entities or attributes
-
Data types in xDM
-
Effective date on entities
-
Search using wild cards
-
Export a model from production and import on a development environment
-
"Allow Delete" vs "Allow Removal" privileges
-
LOV label in Named Query
-
Select location on a map and save coordinates
-
Is there a way to set up a master-detail relationship on browse mode?
-
Choose Either a Stepper or A Workflow Based on The User Privileges
See all 263 topics