date. 2013/2/19

category. JavaScript

基本的なGoogleMapAPIの使用方法です。

使用方法

JavaScript

$(function(){
	function init() {
		var map;
		//Mapの中心を指定する
		var latlng = new google.maps.LatLng("35.689185", "139.691648");
		var opts = {
			//ズーム
			zoom: 6,
			//地図の種類
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			center: latlng
		};

		//GoogleMapを使用する#idを指定する
		map = new google.maps.Map(document.getElementById("map"), opts);

		//Markerをセットする
		var markerOpts = new Array();
		//Markerの数だけ追加する
		markerOpts.push({
			//緯度経度を指定
			position: new google.maps.LatLng("35.689185", "139.691648"),
			map: map
		});
		markerOpts.push({
			position: new google.maps.LatLng("34.689185", "139.691648"),
			map: map
		});

		var marker = new google.maps.Marker(markerOpts);
		for (i = 0; i < markerOpts.length; i++) {
		    var myMarker = new google.maps.Marker({
		        position: markerOpts[i].position,
		        map: map
		    });
		}
	}
	init();
});

HTML

<div id="map"></div>

と、簡単に使用することが出来ます。

参考サイト

関連記事