groups

Link to this snippet:


Download to Code Collector

language: Other
licence: Other

JS/HTML/GOOGLE MAPS API : gabarit+js : modèle de départ + bouton pour la vue Earth

options: send to code collector • view all pierre alexandre payet's snippets
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=abcdef&sensor=true_or_false"
            type="text/javascript"></script>
    <script type="text/javascript">

		function initialize() {
		
			if (GBrowserIsCompatible()) {

				//création de la map
				var map = new GMap2(document.getElementById("map_canvas"));
				map.setCenter(new GLatLng(-21.04377934223911, 55.71240107331785), 14);
				map.setUIToDefault();
				 
				//paramètrage de l'interface, exemple : suppression de la vue relief
				var mapui = map.getDefaultUI();
				mapui.maptypes.physical = false; 
				map.setUI(mapui);
				//ajout de la vue Google Earth
				map.addMapType(G_SATELLITE_3D_MAP); 
				

				//ajout d'un marker
				var marker = new GMarker(map.getCenter(), {title: "MarkerTest"});

				//ajout d'une popup avec du contenu html
				GEvent.addListener(marker, "click", function() {
			    	marker.openInfoWindowHtml(
			    	' <object type="application/x-shockwave-flash" data="media/swf/videos_quartiers/Beaufond.swf" width="400" height="360">'+ 
			    		'<param name="movie" value="media/swf/videos_quartiers/Beaufond.swf" /> '+
			    		'<param name="wmode" value="transparent" /> '+
			    		'<param name="quality" value="high" /> '+
			    		'<p>Quartiers de Saint-Benoît</p> '+
			    		'</object>'
			    	);
			    });
				map.addOverlay(markerBeaufond);
				
			}
			
		}

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()"> <!--la fonction initailize créera la map au chargement de la page-->
    <div id="map_canvas" style="width: 1000px; height: 620px; margin: 40px auto 0 auto;"></div>
  </body>
</html>