<!DOCTYPE html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>Google Maps API</title> <!-- 【１】Google Maps APIを呼び出し--> <scripttype="text/javascript"src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script> <!-- 【2】どんな地図を描くかのメイン処理 --> <scripttype="text/javascript"> // ■地図初期化し表示 function initialize(){ // ■地図を表示する緯度経度を指定する var latlng = new google.maps.LatLng(35.710058,139.810718); // ■地図必須プロパティを設定 var myOptions = { // ■ズームレベルの指定 0～17 zoom: 15, // ■地図の中心を指定（上記で設定の緯度経度latlng） center: latlng, // ■地図のタイプ設定 // ROADMAP：デフォルト、SATELLITE：写真タイル、HYBRID：写真タイルと主要な機能、TERRAIN：物理的な起伏を示すタイル mapTypeId: google.maps.MapTypeId.ROADMAP, //マウスホイール動作を無効化 scrollwheel: false, };// 地図プロパティここまで // ■<div id="map_canvas">と結びつけて、その領域に地図を描く var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //表示位置調整（地図の中心を変更） map.panBy(0, -100); //吹き出しの内容の設定 var contentString='<p><strong>プランナーITスクール 新横浜校</strong><br />〒222-0033<br />横浜市港北区新横浜三丁目19番地14号4階<br /><em>お問い合わせ</em><br />TEL : 045-477-3520</p>'; var infowindow= new google.maps.InfoWindow({ content:contentString }); // ■中心にマーカーの表示 var marker1 = new google.maps.Marker({ position: latlng, title:"スカイツリー" }); marker1.setMap(map); }//initialize() </script> </head> <bodyonload="initialize()"> <!-- 地図はここに描画される --> <divid="map_canvas"style="width: 640px; height: 480px;"></div> </body> </html>