CODEWITHSUNDEEP
javascriptcsshtml
Arash
Arash

Reputation: 514

Rotating google map embedded in html

I am going to make an app that has a special part to show an embedded google map. At first everything works well But when I rotate back my device, the map exceeds in the defined width and loses its css class ( it can not apply the width of 220px which I used ).

{ // Anyhow as I touch the map it will be OK and it goes to its width // } { // I am using Twitter Bootstrap // }

What is the solution for this big problem of mine?

I am awaiting your kind replies.

This is the embeded google map:

    <article class="container">
     .
     .
     .
     ...( some tags go here )

           <section class="span12">
        <div class="map">
            <iframe width="80%" height="50%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=39.6846,-104.88802&amp;spn=0.088114,0.209255&amp;t=m&amp;z=13&amp;output=embed">
            </iframe>
        </div>
           </section>

    </article>

This is a css class I am using:

  @media (max-width: 400px) {
  .map {width: 220px;}
  }

Upvotes: 2

Views: 1955

Answers (2)

Arash
Arash

Reputation: 514

Heh :-D I finally made my way to a solution:

iframe HTML5 tag is useless in this regard because it does not support device orientation. So it must be removed and I used a div with the id="mapDiv" instead:

     <body onLoad="initialize()"> <!-- Important -->
       <article class="container">
       .
       .
       .
       ...( some tags go here )

            <section class="span12">
                <div id="mapDiv"> </div> <!-- Changed -->
            </section>

       </article> 
     </body>

and according to what Sven Bieder commented I used Google map API like this:

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

<script type="text/javascript">

 function initialize() {
     var position = new google.maps.LatLng(38.89655520572012, -77.03372955322266); /*Here is the coordinates of the specific place we want to mark on map*/
     var myOptions = {
     zoom: 15,
     center: position,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     };
     var map = new google.maps.Map(
     document.getElementById("mapDiv"), myOptions);

     var marker = new google.maps.Marker({
     position: position,
     map: map,
     title:"We are here.",
     }); 
     }
</script>

Well the device orientation issue has been solved now :-)

and Here is some optional CSS for #mapDiv:

  #mapDiv {
     width: 100%;
     height: 300px;
     margin: auto;
     -moz-box-shadow: 1px 2px 12px #999999;
     -webkit-box-shadow: 1px 2px 12px #999999;
     border-radius: 8px;
   }

Upvotes: 3

Osama Ahmad
Osama Ahmad

Reputation: 235

add this style will rotate the div 

div
{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -moz-transform:rotate(7deg); /* Firefox */
  -webkit-transform:rotate(7deg); /* Safari and Chrome */
  -o-transform:rotate(7deg); /* Opera */
}

<div style="transform:rotate(90deg); -ms-transform:rotate(90deg); /* IE 9 */ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari and Chrome */ -o-transform:rotate(90deg); /* Opera */" class="map">
        <iframe width="80%" height="50%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=39.6846,-104.88802&amp;spn=0.088114,0.209255&amp;t=m&amp;z=13&amp;output=embed">
        </iframe>
    </div>

Upvotes: -1

Related Questions