11540 sujets

JavaScript, DOM et API Web HTML5

Google Map et jQuery Mobile

Bonjour à tous,

Voilà je suis entrain de développer une application web en jQuery Mobile, il se trouve que j'ai besoin d'utiliser Google Map mais je ne parviens pas à afficher la carte, pourtant je suis le "Get Started" de Google...

Head

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Timer</title>

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="http://maps.googleapis.com/maps/api/js?key=MYKEYYYY&sensor=true"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	<script src="js/highcharts.js"></script>
	<script src="js/jquery.timer.js"></script>
	<script src="js/main.js"></script>
</head>


Structure HTML

	<div data-role="page">
		<div data-role="header"><h1>Accueil</h1></div>
		<div data-role="content">			
			<a data-role="button" id="end" href="#informations" data-theme="e" data-icon="check">End</a>
		</div>
		<div data-role="footer">Footer</div>
	</div>

 	<div data-role="page" id="informations">
		<div data-role="header"><h1>Informations</h1></div>
		<div data-role="content">
			<div id="bestTime"></div>
			<label for="basic">Nom du terrain : </label>
			<input type="text" name="name" id="basic" data-mini="true" />
			<div class="ui-grid-solo">
				<div class="ui-block-a"><div id="map" width="500px" height="200px"></div></div>
			</div>
			<div class="ui-grid-solo">
				<div class="ui-block-a"><a data-role="button" href="#result" data-theme="e" data-icon="check">Analyser</a></div>
			</div>
		</div>
		<div data-role="footer">Footer</div>
	</div>


jQuery (main.js)

$(document).bind('pageinit', function(){
	function initializeMap() {
		console.log("Google Map");
		var myOptions = {
			center: new google.maps.LatLng(46.32, 5.04),
			zoom: 8,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("map"), myOptions);
	}

        $('#informations').live('pageshow',function(event, ui){ initializeMap(); });
});


Aucun message d'erreur mais le carte ne s'affiche pas...
Modifié par tonymx15 (10 Oct 2012 - 11:18)
Hello

ce code fonctionne


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title></title>
        <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="css/my.css" />
        <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
        <script src="js/jquery.js"></script>
        <script src="js/jquery.mobile-1.2.0.min.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script src="js/my.js"></script>
    <style type="text/css"> 
        .gmap { height: 330px; width: 100%; margin: 0px; padding: 0px }
    </style>
     <script type="text/javascript">
            var map, latlng, myoptions;
            function initialize() {
                latlng = new google.maps.LatLng(40.716948, -74.003563);
                myoptions = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
                map = new google.maps.Map(document.getElementById("map"), myoptions);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    visible: true
                });
            }
            $('.page-map').live("pagecreate", function() {
                initialize();
            });
    
            $('.page-map').live('pageshow',function(){
                //console.log("test");
				googlemaps();
                google.maps.event.trigger(map, 'resize');
                map.setOptions(myoptions); 
            });
			function googlemaps(){	  
			  var address = window.localStorage.getItem("url");
			  geocoder = new google.maps.Geocoder();
				geocoder.geocode({ 'address': address }, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
				map.setCenter(results[0].geometry.location);
				var marker = new google.maps.Marker({
				map: map,
				position: results[0].geometry.location
		  });
				google.maps.event.trigger(map, 'resize');
				
				
			  } else {
				//alert("Pas de localisation");
			  }
			});  
		  }
			
        </script> 
</head>

<body>
   <div data-role="page" class="page-map">
        <div data-theme="b" data-role="header" data-id="head1" data-position="fixed">
            <a href="index.html" data-role="button" data-transition="fade"  data-icon="home" data-iconpos="notext" rel="external"></a>
            <a href="index.html#page9" data-role="button" data-transition="fade"  data-icon="search"  class="ui-btn-right" data-iconpos="notext" rel="external"></a>
            <h3>FICHE</h3>
        </div>
        <div data-role="content">
            <a href="" data-role="button" data-transition="fade" data-inline="true" data-rel="back">< Retour</a>	
            <div id="map" class="gmap"></div>
        </div>
	</div>
</body>
</html>


tu peux utiliser les versions en ligne des js et css par exemple


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>


tu as juste à insérer ton adresse dans la var address
Ça ne marche toujours pas...


<!DOCTYPE html>

<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Timer</title>

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyATOECVL6CeQkB81Mn58o2mRD5B2Gr4bw8&sensor=true"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	<script src="js/highcharts.js"></script>
	<script src="js/jquery.timer.js"></script>
	<script src="js/main.js"></script>

	<script>
		function initialize() {
			console.log('init');
	        var options = {
	        	zoom: 14,
	        	center: new google.maps.LatLng(40.716948, -74.003563),
	        	mapTypeId: google.maps.MapTypeId.ROADMAP
	        };
	        var map = new google.maps.Map(document.getElementById("map"), options);
	    }
		$('#informations').live("pagecreate", function() {
            console.log('pagecreate');
            initialize();
        });
	</script>
</head>
<body>

	<div data-role="page">
		<div data-role="header"><h1>Accueil</h1></div>
		<div data-role="content">			
			<a data-role="button" id="end" href="#informations" data-theme="e" data-icon="check" data-transition="slide">End</a>
		</div>
		<div data-role="footer">Footer</div>
	</div>

 	<div data-role="page" id="informations">
		<div data-role="header"><h1>Informations</h1></div>
		<div data-role="content">
			<div class="ui-grid-solo">
				<div class="ui-block-a"><div id="map" width="500px" height="200px"></div></div>
			</div>
		</div>
		<div data-role="footer">Footer</div>
	</div>
</body>
</html>
Sujet clos
Aller à