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/