none
Why does my Bing map always show up in fullscreen? RRS feed

  • Question

  • Windows 8 store app - JavaScript + HTML/CSS

    I have a div in a column based layout where the div is forced into it's own column on the end. I have set the div to 580px by 300px in the CSS, however whenever I load in the map using the below code, it shows a map that fills the entire screen, despite me trying to load it into my div..

    Any ideas?

    My HTML for the div:

    <div class="map" id="job_map_canvas" style="width:300px;height:580px;"> </div>

    And this is in the ready function for my pagecontrol:

                         $(document).ready(function () {
                                var mapLoadOptions = { 
                                    callback: function () {
                                        var mapOptions = {
                                            credentials: "mybingkey",
                                            zoom: 10
                                        };
    
                                        map = new Microsoft.Maps.Map(document.getElementById("job_map_canvas"), mapOptions);
    
                                        pinLayer = new Microsoft.Maps.EntityCollection();
    
                                        map.entities.push(pinLayer);
    
                                        var myLoc = new Microsoft.Maps.Location(this.job.address.lat, this.job.address.lng);
                                        pinLayer.push(new Microsoft.Maps.Pushpin(myLoc));
                                    }.bind(this)
                                };
                                Microsoft.Maps.loadModule('Microsoft.Maps.Map', mapLoadOptions);
                          }.bind(this));


    • Edited by GilesWilliamsCTO Thursday, January 24, 2013 1:27 AM Removed bing key
    Thursday, January 24, 2013 1:25 AM

Answers