日: 2015年7月17日

googlemap apiにて地図を表示する方法

apiキーは登録せず

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

apiあれば
詳しく説明
http://syncer.jp/google-maps-javascript-api-matome

<head>
	<script src="http://maps.googleapis.com/maps/api/js?key={APIキー}&sensor=false"></script>
</head>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
//キャンパスの要素を取得する
var canvas = document.getElementById( "gmap" );

//中心の位置座標を指定する
var latlng = new google.maps.LatLng( 35.2732709,136.7873687 );

//地図のオプションを設定する
var mapOptions = {
	zoom: 18 ,				//ズーム値
	center: latlng ,		//中心座標 [latlng]
	scrollwheel: false //スクロール禁止
};

//[canvas]に、[mapOptions]の内容の、地図のインスタンス([map])を作成する
var map = new google.maps.Map( canvas , mapOptions );


// マーカー
new google.maps.Marker({
  position: new google.maps.LatLng( 35.2732709,136.7873687),
  map: map,
 // icon: "v.png"
});
</script>


<div id="gmap" style="width:100%; height:500px;">



<!--
<iframe width="100%" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.jp/maps?q=愛知県一宮市大和町南高井宮腰72&amp;z=14&amp;scrollwheel=false&amp;output=embed&iwloc=B"></iframe>

-->
</div>

参考http://www.nanchatte.com/map/MarkerImage.html