ホームページ修正

Ｇｏｏｇｌｅマップに任意のふきだしをつけるには？
最終更新日：2022.09.13

つぎのように、Googleマップに任意のふきだしを入れる手順をご紹介します。

まずは以下の内容でJavaScriptファイルを準備します。
名前は「g_map.js」（名前は任意）としています。
このファイルを適当なフォルダーにアップします。
※今回はhtmlファイルと同列の場所に「js」フォルダーを作成し作成してそこにアップしました。

google.maps.event.addDomListener(window, 'load', function() {
var lat = 34.009963;    // 緯度
var lng = 131.86061;   // 経度
var latlng = new google.maps.LatLng(lat, lng);  // 緯度経度
var map = document.getElementById("map_canvas");    // 地図の場所
// 地図のオプション
var options = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// 地図オブジェクト
var mapObj = new google.maps.Map(map, options);
// マーカー設置
var marker = new google.maps.Marker({
position: latlng,
map: mapObj
});
var infowindow = new google.maps.InfoWindow({
　　　content: "
" +
"
有限会社blanc
" +
"山口県下松市西豊井1410-14" +
"
"
　　});
　　　infowindow.open(map, marker);
});

※ハイライト表示部分2行目と3行目の緯度経度を使う地図に併せて変更してください。
※任意の文字は27行と28行目のように任意の文字を入れる事が出来ます。

緯度経度を調べるには「googlemap緯度経度」で検索するといくつかサイトをが出てきますが、
このサイトが分かりやすいかも。
http://www.geocoding.jp/

次に地図を表示させたいHEAD内に次の内容を表記します。

これで任意の吹き出しを入れた地図を表示させる準備が出来ました♪

あとは地図を表示したい場所に次のようにソースを記述します。

場所や大きさは適当に変更してください。

うまくGoogleマップに吹き出だしが設置できない場合は、
こちらからお問い合わせ下さい。→blanc更新サポート

https://www.blanc.to/blog/blog_wp/hpkoushin