Google Map Integration

ESherbakova

Registered Developer

Join Date: Dec 2009
Posts: 187

19 Sep 2013, 11:42

We are trying to integrate the Google map to our product by using the follow html code.
Smart Client Version : Version v8.3p_2013-08-15/PowerEdition Development Only (2013-08-15)
Browser: FireFox 12

Code:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

We have tried with HtmlFlow, but script block can be executed only if we use contentUrl, so we tried the follow SC code in the feature explorer.

Code:

 
isc.HTMLFlow.create({
    width:230,
    styleName:"exampleTextBlock",
    contentsURL:"https://google-developers.appspot.com/maps/documentation/javascript/examples/full/map-simple"
})

The url points to the html at the top.
We have also tried another way that use fileLoader�s loadJSFiles to import google map�s source and execute script

Code:

 var map = isc.HTMLFlow.create({
    width:230,
    styleName:"exampleTextBlock",
    contents:"<div id='map-canvas'></div>"
})
map.draw();
isc.FileLoader.loadJSFiles("https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false",
 
"function googleMap() {"+
"function initialize() {"+
"var map;"+
  "var mapOptions = {"+
    "zoom: 8,"+
    "center: new google.maps.LatLng(-34.397, 150.644),"+
    "mapTypeId: google.maps.MapTypeId.ROADMAP"+
  "};"+
  "map = new google.maps.Map(document.getElementById('map-canvas'),"+
      "mapOptions);"+
"}"+
 
"google.maps.event.addDomListener(window, 'load', initialize);"+
"}"
);

We also tried the cavans

Code:

 
var html= "<!DOCTYPE html>"+
"<html>"+
"<body>"+
"<div>"+
"<script"+
"src='http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false'>"+
"<script>var map;"+
"function initialize()"+
"{"+
"var mapProp = {"+
  "center:new google.maps.LatLng(51.508742,-0.120850),"+
  "zoom:5,"+
  "mapTypeId:google.maps.MapTypeId.ROADMAP"+
  "};"+
"map=new google.maps.Map(document.getElementById('googleMap'),mapProp);"+
"}"+
"google.maps.event.addDomListener(window, 'load', initialize);"+
"</script>"+
"<div id='googleMap' style='width:500px;height:380px;'></div>"+
"</div>"+
"</body>"+
"</html>"

var canvas = isc.Canvas.create({
getInnerHtml: function() { return html; }
});

However, after we click the �try it� button, in all three ways,the page loads forever.
Is there any other to integrate the top html into smartclient ui to see Google map?

Tags: None

Isomorphic

Administrator

Join Date: May 2006

Posts: 54656
#2

19 Sep 2013, 12:03

To cause script blocks to be executed when using HTMLFlow.setContents(), set evalScriptBlocks to true.

Other than that, there's no obvious reason why any of your approaches would not work - whatever is going wrong is something in Google Maps. For at least some of the cases, we suspect the failure is because Google doesn't allow the content to be embedded that way or you aren't providing a valid API key for the URL where you're embedding the map.

If you'd like us to investigate the best approach and provide a supported GoogleMaps widget, you can use the Feature Sponsorship program.
Comment

Previous template Next

Announcement

Google Map Integration

Comment