Googleマップには、指定した範囲の地図をWebページに埋め込む機能が用意されているが、配色など詳細なカスタマイズは出来ない。
せっかくサイトのデザインを黒背景のIngress風にしていても、明るくカラフルなマップが表示されては台無しになってしまう。
そこで、「Google Maps JavaScript API v3」という方式を利用して地図を埋め込んでみよう。配色などのデザインを詳細にカスタマイズしたり、マーカーアイコンを表示するなど、高度な地図の埋め込みが可能だ。Intel MapもこのAPIを利用して作られており、デザインを指定しているオプションを真似れば、Intel Mapと同じデザインの地図を埋め込めるぞ。

このAPIの詳細な説明は、公式のリファレンスページに掲載されている他、有志による日本語の解説記事も存在するので、より高度な機能を利用したい場合はこれらを参考にしよう。
なお、公式のドキュメントによると、APIを利用するにはGoogleのアカウントで開発者登録を行いAPIキーを取得する必要があるとのことだが、今のところAPIキー無しでも利用できるようだ。

・Getting Started | Google Maps Javascript API | Google Developers

・Google Maps JavaScript API V3 Reference | Google Maps Javascript API | Google Developers

・Google Maps JavaScript API v3の使い方まとめ (サンプルコード付き)

まずは、地図の中心にしたい座標や、マーカーを表示させたい座標を調べよう。
Googleマップでは、右クリックで表示されるメニューの「この場所について」をクリックすると、画面下に地名や住所とともに緯度, 経度が表示されるぞ。

Intel Mapでは、右上の「Link」をクリックすることで、地図の中心座標と縮尺を含むURLが表示される。「ll=」以下が緯度,経度、「z=」以下が縮尺レベルだ。ポータルをクリックして情報を表示している状態では、「pll=」以下にポータルの緯度,経度が表示されるぞ。

Intel Map風の地図をWebページに埋め込むには、以下のようなHTMLタグを貼り付けよう。
複数の地図を埋め込みたい場合は、2行目以降をコピーして、2箇所ある「map_1」の部分を別の識別名に変えて貼り付ければいいぞ。

<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<div id="map_1" style="width:640px;height:480px"></div>
<script>window.addEventListener('load',function(){
    var map=new google.maps.Map(document.getElementById('map_1'),{
        center:new google.maps.LatLng(35.705575, 139.751878),        // ←地図の中心の緯度,経度を指定する部分
        zoom:16,                                                     // ←地図の縮尺レベルを指定する部分
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles:[
            {featureType:'all',elementType:'all',         stylers:[{hue:'#131C1C'},{saturation:-50},{invert_lightness:true}]},
            {featureType:'water',elementType:'all',       stylers:[{hue:'#005EFF'},{invert_lightness:true}]},
            {featureType:'poi',                           stylers:[{visibility:'off'}]},
            {featureType:'transit',elementType:'all',     stylers:[{visibility:'off'}]},
            {featureType:'road',elementType:'labels.icon',stylers:[{invert_lightness:true}]},
        ]
    });
    function addMarker(lat,lng,text){
        return(new google.maps.Marker({
            map:map,position:new google.maps.LatLng(lat,lng),
            title:text,label:{color:'#cde',text:text},
            icon:'data:image/gif;base64,R0lGODlhGgAaAKECABWDgzD/9P///////yH5BAEKAAIALAAAAAAaABoAAAJblI8SG+mvmFzQzQDArVHmr02PB5aZZGHmejYIw7LMu8TrfNT27XY779L9TBTYkEg6IoVK0KTpLKqgIYOxiYtQKTnmL+tTgrXiXtcLNJ+vn03l0kJx1u55ilspAAA7',
        }));
    }
    addMarker(35.705575, 139.751878,'東京ドーム');                   // ←マーカーを表示させる部分
    addMarker(35.705671, 139.749367,'小石川後楽園');
});</script>

1行目の「<script～」は、JavaScript APIの本体を読み込むためのタグだ。
2行目「<div～」は、地図の描画先となるボックス領域を確保するタグで、「width:」「height:」以下の数値でサイズを指定している。
その後の「<script>」内が、APIを利用して地図の表示を実行させている部分だ。
6行目の「LatLng()」の中に、地図の中心となる緯度・経度を記述しよう。
7行目の「zoom:」の後の数字は、縮尺レベルだ。Intel Mapの「Link」で表示されるURLの「z=」以下を参考に指定しよう。
「disableDefaultUI: true」の行は、ズームボタンなどを非表示にするという指定。削除すれば普通に表示されるようになるぞ。
「mapTypeId」の行は表示する地図の種別の指定で、「google.maps.MapTypeId.SATELLITE」にすれば写真地図になる。
「styles」以下の字下げされている部分が、地図の配色などを設定している行だ。
「featureType:’poi’」と「featureType:’transit’,elementType:’all’」の行で施設名などの表示をオフにしており、削除すれば多くの情報が表示されるようになるぞ。
「function addMarker(map,lat,lng,text)」以降の字下げされている行は、マーカーを追加するための処理を「関数」として定義している部分だ。
「icon」以下に、マーカーのアイコン画像のURLが記述されている。この例では画像データをエンコードしたデータURIにしているが、「http://」から始まる通常の画像ファイルURLを指定してもいいぞ。
「addMarker()」の行では、上で定義したマーカーの追加処理を呼び出している。マーカーを増やしたい場合は、この行をコピーして、()内の経度、緯度、マウスカーソルを乗せたときに表示されるテキストを変更しよう。

実際に上記のコードを埋め込むと、以下のようになる。
ポータルなどの情報が無くて少々寂しい感じになってしまうので、マーカーが少ない場合は「featureType:’poi’」と「featureType:’transit’,elementType:’all’」の行を削除して、施設名などが表示されるようにしておいた方がいいかも知れない。