GoogleMapをWebページに載せる方法。

2015.01.10

GoogleMapをWebページに設置する方法があると思いますが、自分は下記の方法で設置しています。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script>

	$(function(){

	    // タブの設定

	    $('#g_map1').hide();

	        $('#g_map1').show().html('<div id="map1"></div>');

	        

				  var myMap = new google.maps.Map(document.getElementById("map1"), {

				    // ズームレベル

				    zoom: 14,

				    // 地図の中心点の緯度経度

				    center: new google.maps.LatLng(35.681382, 139.766084),

				    // 距離目盛り表示

				    scaleControl: true,

				    // 地図の種類

				    mapTypeId: google.maps.MapTypeId.ROADMAP,

				    

				    mapTypeControl: true,

				    mapTypeControlOptions: {

				      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU

				    },

				    zoomControl: true,

				    zoomControlOptions: {

				      style: google.maps.ZoomControlStyle.SMALL

				    },

				  }); 

				  

				  var contentString="<div id='infowin1' style='font:14px;'>東京駅</div>";

				  var myInfoWindow = new google.maps.InfoWindow({

				    content: contentString

				  });

				  var myMarker = new google.maps.Marker({

				    // マーカーを置く緯度経度

				    position: new google.maps.LatLng(35.681382, 139.766084),

				    map: myMap

				  });

				  

				  // 吹き出しを表示

				  myInfoWindow.open(myMap, myMarker);

				  // 吹き出しが閉じられたら場合、マーカークリックで再表示

				  google.maps.event.addListener(myInfoWindow, "closeclick", function() {

				    google.maps.event.addListenerOnce(myMarker, "click", function(event) {

				      myInfoWindow.open(myMap, myMarker);

				    });

				  });  

	        

	});</script>

$(function(){

// タブの設定

$('#g_map1').hide();

$('#g_map1').show().html('<div id="map1"></div>');

var myMap = new google.maps.Map(document.getElementById("map1"), {

// ズームレベル

zoom: 14,

// 地図の中心点の緯度経度

center: new google.maps.LatLng(35.681382, 139.766084),

// 距離目盛り表示

scaleControl: true,

// 地図の種類

mapTypeId: google.maps.MapTypeId.ROADMAP,

mapTypeControl: true,

mapTypeControlOptions: {

style: google.maps.MapTypeControlStyle.DROPDOWN_MENU

zoomControl: true,

zoomControlOptions: {

style: google.maps.ZoomControlStyle.SMALL

});

var contentString="<div id='infowin1' style='font:14px;'>東京駅</div>";

var myInfoWindow = new google.maps.InfoWindow({

content: contentString

});

var myMarker = new google.maps.Marker({

// マーカーを置く緯度経度

position: new google.maps.LatLng(35.681382, 139.766084),

map: myMap

});

// 吹き出しを表示

myInfoWindow.open(myMap, myMarker);

// 吹き出しが閉じられたら場合、マーカークリックで再表示

google.maps.event.addListener(myInfoWindow, "closeclick", function() {

google.maps.event.addListenerOnce(myMarker, "click", function(event) {

myInfoWindow.open(myMap, myMarker);

});

});</script>

を</head>の上に入れます。

あとは、地図を入れたいところに、

を入れれば完了です。

ページに複数GooleMapを入れたい場合は、JavaScriptを同じく下にコピペし、map1をmap2とかに変更。

もちろん、<div id=”map2″>に変更して下さいね。

これで完了です。

GoogleMapをWebページに載せる方法。

関連記事