After updating the form with ref. to the above link
1) Could see the layout for map but the map doesn't display and shows only grey space
2) Tried using the Semarchy suggested HTML code with Input Default Address values i.e. Lat/Long and AdddressLine/City/Postal Code instead of Input parameters. Accessed the HTML directly as a link and the map works fine.
3) However, when used the same HTML code from point 2 issue persists
Please suggest
Best Answer
C
Cedric Blanc
said
over 1 year ago
Here is a working example of a Google Map HTML Code that should be pasted into the value column if a form field.
'<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_Yyr4bb_JPuAM9gPp2GyXYCxUwl3vpkI"></script>; <script> v<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>ar address= "' || SEM_CONCAT(' ', '1', 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: "' || CONCAT( 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
Cedric Blanc
said
over 1 year ago
Answer
Here is a working example of a Google Map HTML Code that should be pasted into the value column if a form field.
'<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_Yyr4bb_JPuAM9gPp2GyXYCxUwl3vpkI"></script>; <script> v<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>ar address= "' || SEM_CONCAT(' ', '1', 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: "' || CONCAT( 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>'
Cedric Blanc
The below embedded google map in a form suggested in the Semarchy website is not working: https://www.semarchy.com/doc/semarchy-xdm/xdm/5.3/Plugins/google-maps-embed-in-forms.html
After updating the form with ref. to the above link
1) Could see the layout for map but the map doesn't display and shows only grey space
2) Tried using the Semarchy suggested HTML code with Input Default Address values i.e. Lat/Long and AdddressLine/City/Postal Code instead of Input parameters. Accessed the HTML directly as a link and the map works fine.
3) However, when used the same HTML code from point 2 issue persists
Please suggest
Here is a working example of a Google Map HTML Code that should be pasted into the value column if a form field.
'<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_Yyr4bb_JPuAM9gPp2GyXYCxUwl3vpkI"></script>; <script> v<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>ar address= "' || SEM_CONCAT(' ', '1', 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: "' || CONCAT( 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>'Cedric Blanc
Here is a working example of a Google Map HTML Code that should be pasted into the value column if a form field.
'<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB_Yyr4bb_JPuAM9gPp2GyXYCxUwl3vpkI"></script>; <script> v<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>ar address= "' || SEM_CONCAT(' ', '1', 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: "' || CONCAT( 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>'-
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 215 topics