How to configure Google Map via Form with Google standardized address as Input parameters : Portal

Start a new topic

Answered

How to configure Google Map via Form with Google standardized address as Input parameters

Cédric BLANC

started a topic about 2 years ago

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

Best Answer

Cédric BLANC said about 2 years 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

Cédric BLANC

said about 2 years 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>'