Eine Google Map in eine jQuery Mobile-Seite einbetten

Ich versuche nur, eine Gogglemap in das Content-Tag einer mobilen jQuery-Seite einzubetten, und ich kann sie nicht auf der Seite erscheinen lassen. Ich schätze mal, es ist ein kleiner Fehler, aber ich habe schon eine Weile damit gerungen und jede Hilfe wird geschätzt.Eine Google Map in eine jQuery Mobile-Seite einbetten

<head> 
    <style type="text/css"> 
     #map_canvas { 
      height: 256px; 
      width: 384px; 
      margin-top: 0.6em; 
     } 
    </style> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="fbObj1.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" 
    /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
    /> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" 
    /> 
</head> 

<body> 
    <script type="text/javascript"> 
     geocoder = new google.maps.Geocoder(); 
     var map = new google.maps.Map($("div#map_canvas"), { 
      center: new google.maps.LatLng(37.371940, -122.116470), 
      zoom: 11, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     map.index = 2; 
    </script> 
    <div data-role="page"> 
     <div data-role="header"></div> 
     <div data-role="content"> 
      <div id="map_canvas"></div> 
     </div> 
     <div data-role="footer" data-position="inline"></div> 
    </div> 
</body>

Quelle

2012-04-12 Ben Pearce

$ (div # nicht erforderlich. $ ("# Map_canvas") ist genug –

Vielen Dank für die Antwort aber ich habe deinen Vorschlag umgesetzt und die Karte erscheint immer noch nicht. –

Der folgende Code funktioniert für mich

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script> 
<script type="text/javascript">  
    function initialize() { 
     var myOptions = { 
      center: new google.maps.LatLng(37.371940, -122.116470),   
      zoom: 11,   
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     };   
     var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
    }  
</script> 

<body onload="initialize()">

Quelle

2012-04-12 07:38:48

Eine Google Map in eine jQuery Mobile-Seite einbetten

Antwort

Verwandte Themen