Google Mapの文字を消すStyled Maps Wizardの使い方教えて下さい

Google Mapの画面を自由にカスタマイズ出来るStyled Maps Wizardで
道路の色を変えたり地名や表記を消すところまで出来ましたが
それを出力する手段が分かりません。

参考にしているサイト
http://lopan.jp/google-maps-api/

↑このサイトの下の方で
3.「これでよし」となったら「Show JSON」ボタンをクリックして、コードを書き出します。

で、私はコードを書き出しました…。

4.生成されたコードの[]の中身（2行めから最後から2行めまで）を下記へコピペしたらできあがり

となっているのですが、「下記へコピペ」となっていて
「ここへコピペ」とかいてある画面自体があるのですが、よく分かりません。

Styled Maps Wizard画面の右側の「Show Json」のあるパレットを右クリック
「ページのソースを表示」するとソレらしい画面が出て来るのですが
どこへ？どのようにして？JSONコードを貼り付けたらよいのか？

また「Show Json」の横の「Static Map」ボタンを押すと
目的の地図の小画面が出てきて、その画像のアドレスをクリックして
更にその地図上で右クリックすると「検証」とありそれをクリックすると
「何やらソレらしき画面」が出て来るものの、何をどうしたらよいのか？
サッパリわかりません。

あと、リンク先の地図の大きさが640×480で小さいのですが
せめて2000×1000ぐらいは欲しいです。
何か設定があるのでしょうか？

質問者からの補足コメント

• ご回答ありがとうございました。
  もし、お時間があれば、もう少し手順を教えていただけませんか？
  上記の項目らしきところを削除してコピーしたJsonコードを貼り付けようとしても
  何も起こりませんでした。（私のやっている事が的外れなのかもしれません）
  
  もしくは発想を変えて、自分好みのマップ設定をした後、
  Google Maps API Styled Map Wizardの両サイドにあるパレットを消す事が出来たら
  後はその画面をスクリーンショットして保存出来てもいいのですが
  いかがでしょうか。

  No.1の回答に寄せられた補足コメントです。 補足日時：2016/06/09 08:09

• 素人ですみません。
  ＞JavaScript + HTML、をコピーしてメモ帳に貼り付けます、
  　貼り付けました。
  ＞Styled Maps Wizardのデータを入れ替えます、
  　入れ替える？？　何をどのようにしたら入れ替える事になるのでしょうか?
  　入れ替えるという”その作業”が私には分からないのですが…。(;^_^A
  ＞自分のAPI キーをYOUR_API_KEYの所に書き込み完成です、
  　これは先にメモに張り付けた文字の下の方に「YOUR_API_KEY」があるのですが
  　その部分に自分のAPI キーを貼り付けるのですか?
  ＞拡張子txtをhtmlにします。
  　そのメモ帳の拡張子をhtmlに変えてどこかへ保存するのですか?
  　あともう少し補足を頂けたら幸いです。ｍ（＿　＿；）ｍ
  　その際、もし出力する地図の大きさを変更出来るなら
  　どこをどのようにすればよいでしょうか?

  No.2の回答に寄せられた補足コメントです。 補足日時：2016/06/11 10:06

• ご回答ありがとうございました。
  全くの無知したが何とか出来ました！(^。^；)
  Jsonコードのコピーは頭にありましたが、APIキーの事すら知らず
  Jsonコードと混同して苦戦しておりました。(>_<)
  最後にもう１問だけお願いいたします。
  地図をカスタマイズしたhtmlファイルが出来たのはいいのですが
  ニューヨークのブルックリンから始まるので地元に変更したいのですが
  どの手順でもって、どの様にすればよいでしょうか？m(_　_;)m

    補足日時：2016/06/11 17:11

No.2 ベストアンサー 回答者： nooloor 回答日時： 2016/06/10 22:19

Simple styled maps

https://developers.google.com/maps/documentation …
このページの、
JavaScript + HTML、をコピーしてメモ帳に貼り付けます、
Styled Maps Wizardのデータを入れ替えます、
自分のAPI キーをYOUR_API_KEYの所に書き込み完成です、
拡張子txtをhtmlにします。


（Google Maps API Styled Map Wizardの両サイドにあるパレットを消す事が出来たら
後はその画面をスクリーンショットして保存出来てもいいのですが
いかがでしょうか。）
これは、良く解りません、データ作成用のものではと思います。

No.4 回答者： nooloor 回答日時： 2016/06/11 18:02

この場所です、

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 40.674, lng: -73.946}, // Brooklyn.
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
}

Google マップ　熊本市
https://www.google.co.jp/maps/place/熊本県熊本市/@32.8073624,130.7150135,11z/
zoom: 14,
center: {lat: 32.8073624, lng: 130.7150135}, // Kumamon.

この回答へのお礼

図説のご回答ありがとうございました。
おかげさまでようやく完成までこぎつけました！(^_^)

＞center: {lat: 32.8073624, lng: 130.7150135}, // Kumamon.

何となくここの緯度経度を変更する想像は付いていたのですが
図説があったおかげで明確になりました！
ありがとうございました！！＼(^o^)/！

お礼日時：2016/06/12 09:17

No.3 回答者： nooloor 回答日時： 2016/06/11 12:19

先にも書きましたが、

真ん中辺りのこれが設定項目です
{
stylers: [
{hue: '#890000'},
{visibility: 'simplified'},
{gamma: 0.5},
{weight: 0.5}
]
},
{
elementType: 'labels',
stylers: [{visibility: 'off'}]
},
{
featureType: 'water',
stylers: [{color: '#890000'}]
}
削除して自分のデータをコピー＆ペーストします。


取得したキー
AI******Rv_dA******oU_7**5-V**L-*****TI

----------key=YOUR_API_KEY&signed-----------
コピー＆ペースト
----------key=AI******Rv_dA******oU_7**5-V**L-*****TI&signed-----------
その通りです。


適当なフォルダに置いとけば良いと思います。
KKKKK.htmlファイルをクリックすれば、自分が決めたGoogle Mapが出ます、
普通のWEB　Google Mapです。

あなたが、参考にしているサイト、
http://lopan.jp/google-maps-api/
下の方、スタイルサンプルスニペットの、どれかを別窓で開くをクリックしてみて下さい、
自由に使えると思います、同じ事です。

No.1 回答者： nooloor 回答日時： 2016/06/08 19:27

ここのサンプルなら解りやすいと思います

https://developers.google.com/maps/documentation …
真ん中辺りのこれが設定項目です
{
stylers: [
{hue: '#890000'},
{visibility: 'simplified'},
{gamma: 0.5},
{weight: 0.5}
]
},
{
elementType: 'labels',
stylers: [{visibility: 'off'}]
},
{
featureType: 'water',
stylers: [{color: '#890000'}]
}
削除すれば普通の地図です、入れ替えるだけです。