Googleマップ | 相模原市ホームページ制作 ロックストリーム https://rockstream-jp.com 相模原市WEBサイト制作・カスタム・修復 Thu, 25 Jul 2019 06:02:12 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 【Javascript】Google Mapsを英語で表示 https://rockstream-jp.com/javascript-google-maps-en/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-google-maps-en https://rockstream-jp.com/javascript-google-maps-en/#respond Sun, 14 May 2017 01:17:13 +0000 https://rockstream-jp.com/?p=11817 備忘録です。 英語サイトを作成する際に、Google Mapsを英語で表示する必要がありました。 参考サイト 【備忘録】Googl...

The post 【Javascript】Google Mapsを英語で表示 first appeared on 相模原市ホームページ制作 ロックストリーム.]]>

備忘録です。

英語サイトを作成する際に、Google Mapsを英語で表示する必要がありました。

参考サイト
【備忘録】GoogleMap埋め込みを英語表記で

英語で表示するために「&language=en」を追加します。

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

あとは下記を記述して完了です。

<script type="text/javascript"> 
        google.maps.event.addDomListener(window, 'load', function() { 
		
            var lat = 43.058603; //座標
            var lng = 141.369084; //座標
 
            var latlng = new google.maps.LatLng(lat, lng); 
            var mapOptions = { 
                zoom: 12, 
                center: latlng, 
                mapTypeId: google.maps.MapTypeId.ROADMAP, 
                scaleControl: true 
            }; 
            var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 
            var marker = new google.maps.Marker({ 
                position: latlng, 
                map: mapObj 
            }); 
        }); 
</script>

※zoom: 12は数値が大きいほど拡大表示されます。

The post 【Javascript】Google Mapsを英語で表示 first appeared on 相模原市ホームページ制作 ロックストリーム.]]> https://rockstream-jp.com/javascript-google-maps-en/feed/ 0 【Javascript】Google Mapsを白黒で表示 https://rockstream-jp.com/javascript-google-maps-gray-scale/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-google-maps-gray-scale https://rockstream-jp.com/javascript-google-maps-gray-scale/#respond Sat, 13 May 2017 02:25:41 +0000 https://rockstream-jp.com/?p=11270 備忘録です。 オリジナルマーカー表示に続いてMapを白黒で表示する方法です。 こんな感じです。 参考サイト GoogleMapをカ...

The post 【Javascript】Google Mapsを白黒で表示 first appeared on 相模原市ホームページ制作 ロックストリーム.]]>

備忘録です。

オリジナルマーカー表示に続いてMapを白黒で表示する方法です。

こんな感じです。

参考サイト
GoogleMapをカスタムしてグレースケール&オリジナル画像マーカーの地図を作る方法

下記を追加

// 地図をグレースケールに
    var mapStyle = [
      {
          "stylers": [
            { "saturation": -100 }
          ]
      }
    ];
var mapType = new google.maps.StyledMapType(mapStyle);
map.mapTypes.set('GrayScaleMap', mapType);
map.setMapTypeId('GrayScaleMap');

var mapStyle = [
  {
      "stylers": [
        { "saturation": -100 }
      ]
  }
];

この部分で地図のデザインを指定しています。
「saturation」は「彩度」という意味で、この値によって色の鮮やかさが変わります。「-100」が一番小さい値で、この最低値を指定することで地図がグレースケールになります。

先日のマーカー変更に追加すると下記のようになります。

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);
 
  //アイコンを作成
  var icon = new google.maps.MarkerImage('/images/marker.png',
    new google.maps.Size(104,120),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '場所名など'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで
 
  //吹き出しを作成
   var contentString = '<h3 class="map_title">ココはとある場所</h3>' +
                    '<p class="map_comment">位置に特に意味はありません</p>';
   var infowindow = new google.maps.InfoWindow({
       content: contentString  //吹き出し内コメント
    });
 
 
    //吹き出しをオープン
    infowindow.open(map,marker);
 
 
    //マーカーをクリックすれば吹き出しが再表示
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
 
  //マーカーを中心に表示
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });

  //ここから追加
  // 地図をグレースケールに
    var mapStyle = [
      {
          "stylers": [
            { "saturation": -100 }
          ]
      }
    ];
  var mapType = new google.maps.StyledMapType(mapStyle);
  map.mapTypes.set('GrayScaleMap', mapType);
  map.setMapTypeId('GrayScaleMap');

}
</script>

The post 【Javascript】Google Mapsを白黒で表示 first appeared on 相模原市ホームページ制作 ロックストリーム.]]> https://rockstream-jp.com/javascript-google-maps-gray-scale/feed/ 0 【Javascript】Google Mapsでオリジナルのマーカーを表示 https://rockstream-jp.com/javascript-google-maps-original-maker/?utm_source=rss&utm_medium=rss&utm_campaign=javascript-google-maps-original-maker https://rockstream-jp.com/javascript-google-maps-original-maker/#respond Fri, 12 May 2017 01:24:10 +0000 https://rockstream-jp.com/?p=4087 備忘録です Google Mapでオリジナルのマーカーを表示する方法です。 参考サイト (K)GoogleMapをサイトに埋め込ん...

The post 【Javascript】Google Mapsでオリジナルのマーカーを表示 first appeared on 相模原市ホームページ制作 ロックストリーム.]]>

備忘録です

Google Mapでオリジナルのマーカーを表示する方法です。

参考サイト
(K)GoogleMapをサイトに埋め込んでオリジナルアイコンを設置した時の最低限の設定※個別API取得方法も

head部分に以下のスクリプトを記述

<script src="https://maps.google.com/maps/api/js?key=****"></script>

keyの箇所にはAPIコードを入れてください。
取得方法はこちらを参考にしてください。

bodyタグにスクリプトを読み込ませるための「onload=”initialize();」を記述。
スクリプトで取得するidを「access_map」にしています。ここは任意で設定して構いません。

<body onload="initialize();">

<div id="access_map"></div>

</body>

CSSで縦横サイズを指定

#access_map{
     width: 100%;
     height:300px;
}

位置情報などの情報をhead内に記述

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(35.710403, 139.811076);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);
}
</script>

LatLng(35.710403, 139.811076)は経度、緯度です。Google Mapsで取得してください。
なお、マーカーの位置をずらしたい場合には、上の経度、緯度の小数点以下を少しずつ変えると位置調整ができます。
getElementById('access_map')で地図表示のためのid「access_map」を指定。

オリジナルマーカーを表示するためのスクリプト
マーカーを画像にするコードは以下

 var icon = new google.maps.MarkerImage('marker.png',
  new google.maps.Size(156,198),/*アイコンサイズ設定*/
  new google.maps.Point(0,0),  // origin
  new google.maps.Point(60,100) // anchor
  );
var markerOptions = {
  position: latlng,
  map: map,
  icon: icon,
  title: '場所名など'
};

「marker.png」がマーカーの画像名です。
画像が任意のディレクトリにある場合は、「/images/marker.png」のように記述します。

まとめると

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);

  //アイコンを作成
  var icon = new google.maps.MarkerImage('/images/marker.png',
    new google.maps.Size(104,120),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '場所名など'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで
}
</script>

レスポンシブの場合、上記だけだとマーカーが中心からずれてしまいます。

そこで、マーカーを中心に表示するコードを追加します。

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);

  //アイコンを作成
  var icon = new google.maps.MarkerImage('/images/marker.png',
    new google.maps.Size(104,120),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '場所名など'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで

  //マーカーを中心に表示
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
}
</script>

さらに吹き出しを追加する場合は、以下を追加します。

<script>
  function initialize() {
  var latlng = new google.maps.LatLng(34.705629, 135.510118);
  var myOptions = {
    zoom: 18, /*拡大比率*/
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('access_map'), myOptions);

  //アイコンを作成
  var icon = new google.maps.MarkerImage('/images/marker.png',
    new google.maps.Size(104,120),/*アイコンサイズ設定*/
    new google.maps.Point(0,0),  // origin
    new google.maps.Point(60,100) // anchor
    );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    title: '場所名など'
  };
  var marker = new google.maps.Marker(markerOptions);
  //アイコン設定はここまで

  //吹き出しを作成
   var contentString = '<h3 class="map_title">ココはとある場所</h3>' +
                    '<p class="map_comment">位置に特に意味はありません</p>';
   var infowindow = new google.maps.InfoWindow({
       content: contentString  //吹き出し内コメント
    });


    //吹き出しをオープン
    infowindow.open(map,marker);


    //マーカーをクリックすれば吹き出しが再表示
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });

  //マーカーを中心に表示
  google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
  });
}
</script>

吹き出しのCSSを設定します。

h3.map_title{
  text-align: center;
  font-size: 16px;
}
p.map_comment{
  padding:0 30px;
}

次はGoogle Mapsを白黒で表示



The post 【Javascript】Google Mapsでオリジナルのマーカーを表示 first appeared on 相模原市ホームページ制作 ロックストリーム.]]> https://rockstream-jp.com/javascript-google-maps-original-maker/feed/ 0 【Javascript】Google Mapを２つ表示 https://rockstream-jp.com/google-map-two/?utm_source=rss&utm_medium=rss&utm_campaign=google-map-two Fri, 26 Jun 2015 12:04:35 +0000 https://rockstream-jp.com/?p=667 Google Mapを２つ表示してほしいということで、やってみたところ、 あれ！ひとつしか表示されない！！ というわけで、表示する...

The post 【Javascript】Google Mapを２つ表示 first appeared on 相模原市ホームページ制作 ロックストリーム.]]>

Google Mapを２つ表示してほしいということで、やってみたところ、
あれ！ひとつしか表示されない！！

というわけで、表示する方法を調べて実装しました。

参考サイト
Googleマップを１つのページに２つ表示

参考サイトとは違いますが、head内に下記スクリプトを書きました。

<script type="text/javascript">
$(function(){
    var op01={
     zoom:16,
     center:new google.maps.LatLng(35.693242,139.749873),
     mapTypeId:google.maps.MapTypeId.ROADMAP
    };
 
    var map01=new google.maps.Map(
     document.getElementById("map_canvas"),
     op01
    );
 
    var obj01={
     position:new google.maps.LatLng(35.693242,139.749873),
     map:map01
    };
 
    var marker=new google.maps.Marker(obj01);
 
    var info=new google.maps.InfoWindow({
     content:'hogehoge'
    });
 
    info.open(map01,marker);
 
});

$(function(){
    var op={
     zoom:14,
     center:new google.maps.LatLng(35.704279,139.751942),
     mapTypeId:google.maps.MapTypeId.ROADMAP
    };
 
    var map02=new google.maps.Map(
     document.getElementById("map_canvas_s"),
     op
    );
 
 
    var obj02={
     position:new google.maps.LatLng(35.704279,139.751942),
     map:map02
    };
 
    var marker=new google.maps.Marker(obj02);
 
    var info=new google.maps.InfoWindow({
     content:'hogehoge'
    });
 
    info.open(map02,marker);
 
});
</script>

表示したい箇所に

<div id="map_canvas"></div>
<div id="map_canvas_s"></div>

を入れて完了です。

表示位置などはcssで調整します。

本社、支社や事務所・店舗など、２つGoogle Mapを表示するときに役立ちそうです。



The post 【Javascript】Google Mapを２つ表示 first appeared on 相模原市ホームページ制作 ロックストリーム.]]>