2012-04-01 21 views
1

Ich versuche, eine Google-Karte in einem iframe zu zentrieren. Der folgende Code ist der Inhalt des Iframes. Der Marker befindet sich nicht in der Bildmitte.Mittelpunktmarkierung in Google Maps

Was fehlt?

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map_canvas { height: 100% } 
    </style> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=MYAPIKEY&sensor=false"></script> 
    <script type="text/javascript"> 


function initialize() { 
     var myLatlng = new google.maps.LatLng('<?php echo $this->uri->segment(5); ?>', '<?php echo $this->uri->segment(4); ?>'); 
      var myOptions = { 
      zoom: 8, 
       mapTypeControl: false, 
       scaleControl: false, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

      var marker = new google.maps.Marker({ 
       position: myLatlng, 
       map: map, 
       title:"Hello World!" 
      }); 

     } 


     initialize(); 


    </script> 
    </head> 
    <body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html> 

UPDATE

Ich glaube, ich es für die map_canvas kaufen gelöst haben eine feste Größe Einstellung statt 100% zu verwenden. Ich arbeite jetzt viel besser.

+0

Ja, aber das Problem ist, wenn ich es in einen Iframe einfüge, ist es nicht mehr zentriert. –

+0

@Engineer. Bitte erstellen Sie eine Antwort und ich werde sie als beste Antwort wählen. –

Antwort

1

Ihr Code funktioniert für mich ->http://jsfiddle.net/yRHJv und in jsfiddle ist die Karte innerhalb von iframe.

Ich habe Ihren PHP-Code durch einige Dummy-Daten ersetzt.