对话框未显示在Google地图中

Question

I am not able to see the dialog box in the google maps.... i adjusted the width and height of maps but its not working.... is there some other way... providing my code below....

http://jsfiddle.net/KNPZB/4/embedded/result/

<div class="row features">

            <div class="span6">

              <h3>Our office is located at:</h3>
                <p>
                   47653, Lakeview Blvd, Fremont, CA 94538
                </p>
                <p>
                   Ph. (510)-657-8981 | F:(510)-657-8983|E:cs@defie.co
                </p>
                <p>
                   47653, Lakeview Blvd, Fremont, CA 94538
                </p>

            </div>



            <div class="span6">
                <iframe width="265" height="190" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=47657+Lakeview+Blvd.+Fremont,+Ca.+94538&amp;sll=37.472223,-121.931554&amp;sspn=0.008225,0.019569&amp;vpsrc=0&amp;ie=UTF8&amp;hq=&amp;hnear=47657+Lakeview+Blvd,+Fremont,+California+94538&amp;z=14&amp;ll=37.472223,-121.931554&amp;output=embed"></iframe><br>
                <small>
                  <a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=47657+Lakeview+Blvd.+Fremont,+Ca.+94538&amp;sll=37.472223,-121.931554&amp;sspn=0.008225,0.019569&amp;vpsrc=0&amp;ie=UTF8&amp;hq=&amp;hnear=47657+Lakeview+Blvd,+Fremont,+California+94538&amp;z=14&amp;ll=37.472223,-121.931554" style="color:#0000FF;text-align:left">View Larger Map</a>
                </small>

            </div>

        </div>

Answer 1

I think you need to make embedded google map scale according to the size of the browser window.

So try using this: <iframe width="50%" height="50%"...

Sitepoint has a good CSS reference: http://reference.sitepoint.com/css

Answer 2

I don't know how you are planning to fit the information bubble in such a tiny space, since the bubble itself is bigger than your allocated size for the <iframe> element.

In any case, what you want to do is keeping the pin in the correct position (look for the q and sll parameter) but move the center of the map itself a bit down and to the left by fiddling with the ll parameter (ie latitude and longitude).

I have fiddled a bit for you in this demo . Just for reference, I pushed your ll of just around +0,0083/+0,0035 . So we are speaking of small amounts.

I also show you the tiniest possible space in which you can fit both the pin and the info bubble: you need a square of around 260px × 260px , and even then it fits barely, overlapping with the control. So you might want to give a bit more breathing space to your map, or maybe considering using a static map .