Google map being returned in div tags via backbone javascript but not displaying

Question

I have started playing around with Geolocation, and I can get the co-ordinates etc. I want to show this in a map, but when I return the map to the div nothing gets displayed. Now I looked in the div, and the map is being returned but just not visibile. This is the div in question

Notice this seems to be just a link to a tiny map

  <a style="position: static; overflow-x: visible; overflow-y: visible; float: none;                 display:     inline; " target="_blank" href="http://maps.google.com/maps?ll=51.263519,-7.124185&amp;z=21&amp;t=m&amp;hl=en-US" title="Click to see this area on Google Maps"><div style="width: 62px; height: 24px; cursor: pointer; "><img style="position: absolute; left: 0px; top: 0px; -webkit-user-select: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 62px; height: 24px; " src="http://maps.gstatic.com/mapfiles/google_white.png" draggable="false"></div></a>

This is what I'm doing,Html Home

Your location

<div data-role="content" id="location1">
<div  id="map" style="width:100%; height:100%"></div>

My model is as follows

      bb.model.Map = Backbone.Model.extend({
  defaults: {
    center: new google.maps.LatLng(51.26351898,-6.14462727),
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
});

My view is as follows

     bb.view.Location = Backbone.View.extend(_.extend({  

   id: 'map',
   initialize: function(){
     this.map = new google.maps.Map(this.el, this.model.attributes);
 this.render();
   },
 render: function(){
 //    $('#map').replaceWith(this.el);
   $('#map').replaceWith(this.el);
      $('#location-page').page();

   },

}))

I'm also using the following script.

      <script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script>   

Answer 1

You have various problems here so we'll go top to bottom.

When you say this:

<div data-role="content" id="location1">
    <div  id="map" style="width:100%; height:100%"></div>
</div>

The 100% width and height values on #map refer to the parent element so you're saying

make #map the same size as #location1

By default, a <div>, like all block elements, will be as wide as its parent (assuming that there's no margins, padding, ... in the way) and be tall enough to contain its content. If you don't have any CSS that forces #location1 to be a specific size then it will be as wide as the page (or whatever parent it has) and it will have a height of zero. That means that #map will also be zero pixels tall. So you'll need to make sure #location1 has an assigned height.

When you say this in a view definition:

id: 'map',

you're only telling Backbone to set id="map" on the <div> it creates for your view:

el view.el

[...] this.el is created from the view's tagName, className, id and attributes properties, if specified. If not, el is an empty div.

Saying id: 'map' doesn't grab #map from the DOM to use as the view's el, it just leaves you with <div id="map"></div> as your view's el. You probably want to specify el in the view definition:

el: '#map'

You seem to be trying to correct the view's el confusion using replaceWith. That should work, more or less, but you'd still be binding the map to a zero height <div> and then putting that zero height <div> into the DOM. Short is fine but you can't see something that is 0px tall.

Also, you don't need Backbone.View.extend(_.extend({ ... }));, you only need Backbone.View.extend({ ... });.

Assuming that you have something to give #location1 a height, then a view like this:

Backbone.View.extend({
    el: '#map',
    initialize: function() {
        this.map = new google.maps.Map(
            this.el,
            this.model.toJSON()
        );
        this.render();
    },
    render: function() {
        return this; // This is standard practice.
    }
});

should get things moving.

Demo: http://jsfiddle.net/ambiguous/ue4zL/1/

Answer 2

Make sure this.el has a nonzero height. You are destroying #map and replacing it with something entirely new...