CODEWITHSUNDEEP
google-mapsextjs4
John Walker
John Walker

Reputation: 1121

ExtJS HTML load googlemap failed

var layout = Ext.create('Ext.panel.Panel', {
    width: window.innerWidth,
    height: window.innerHeight,
    // title: 'Border Layout', //no title will be blank
    layout: 'border',
    items: [{
        title: 'Message List',
        region: 'south', // position for region
        xtype: 'panel',
        height: 100,
        split: true, // enable resizing
        collapsible: true,
        margins: '0 5 5 5',
        collapsed: true
    }, tree, {
        html: '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&sensor=false&dummy=.js">
                </script> 
                <script type="text/javascript">
                init();
                function init() {
                var googleMapOptions = 
                {
                center: new google.maps.LatLng(53.5267, -1.13330),
                zoom: 16, 
                mapTypeId: google.maps.MapTypeId.ROADMAP};
                map = new google.maps.Map(document.getElementById("map_canvas"),googleMapOptions);
                }</script>
                <body>
                <div id="map_canvas" style="width:600px; height:400px"></div>
                </body>',
         renderTo: Ext.getBody()
     }],
     renderTo: Ext.getBody()
     // get the body and display Layout at there
});

but i m using http://jsfiddle.net/anthor/ufTpN/ are work well, when paste in ExrJS then can't load google map. Why?

PS: I don't want to use Gmappanel and No Iframe, because I want to add marker on this page

Upvotes: 1

Views: 1485

Answers (1)

babinik
babinik

Reputation: 648

First of all, I advise you to use Ext.ux.GMapPanelView basic implementation.

P/S:i don't want to use Gmappanel and No Iframe,because i want to add marker on this page

You can add a marker very simple, look at the code:

 addMarker: function(marker) {
    marker = Ext.apply({
        map: this.gmap
    }, marker);

    if (!marker.position) {
        marker.position = new google.maps.LatLng(marker.lat, marker.lng);
    }
    var o =  new google.maps.Marker(marker);
    Ext.Object.each(marker.listeners, function(name, fn){
        google.maps.event.addListener(o, name, fn);    
    });
    return o;
}

So you can even add listeners to it.

What you are trying to do in the code snippet (example):

{
  html: '<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZx1jmE9yB533ED9suD13buyd0pEfmTzI&sensor=false&dummy=.js"></script>

  <script type="text/javascript">
  init();

  function init() {
   var googleMapOptions = {
       center: new google.maps.LatLng(53.5267, -1.13330),
       zoom: 16, 
       mapTypeId: google.maps.MapTypeId.ROADMAP};
       map = new google.maps.Map(document.getElementById("map_canvas"),googleMapOptions);
  }
  </script>
  **<body>**
    <div id="map_canvas" style="width:600px; height:400px"></div>
  **</body>**',

 **renderTo: Ext.getBody()**
}

Sorry, absolutely is wrong. Adding body tag, rendering to body being under the panel container Ext.panel.Panel, which itself renders its items and etc, this looks that you know not much about the ext's internals and how it works.

You are trying to do something similar that guys from sencha propose to use via basic and very, very simple ux implementation. You can extend it even further.

Just take a look at:

GMapPanelView example also look at the source just to see where googleapis are plugged (you can extend the gmap view loading it async if you want)

GMapPanelView source code

example source

An very simple example with layout border, you have used. In the west region you can find add button, press it to add marker.

Gmap usage, jsfiddle (just an example; don't write actual code this way)

Do not be afraid to look at the source!

Good Luck ;)

Upvotes: 3

Related Questions