google mapに文字などを表示させたい場合

google mapに文字を表示させる機会があったので書きます。

google mapに上記のように何か文字などを表示させるには html要素を生成してMap オ

ブジェクトの controls に表示する位置を指定します。(ようするにカスタムコントロー

ル)

function init() {

        var latlng = new google.maps.LatLng(26.212312, 127.679157);

        var options = {

              zoom: 13,

              center: latlng,

              mapTypeId: google.maps.MapTypeId.ROADMAP,

              zoomControl: false,

              navigationControl: true

        };

        var target = document.getElementById("map-canvas");

        var map = new google.maps.Map(target, options);

        var marker = new google.maps.Marker({

            map: map,

            clickable: true,

            position: latlng,

            draggable: false

        });

        var container = document.createElement('div');

        createContainer(container);

        map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(container);

}

function createContainer(container) {

        container.style.margin = '10px';

        container.style.padding = '10px';

        container.style.border = '1px solid #000';

        container.style.background = '#FFF';

        container.innerText = "testtesttest";

}

 位置指定の種類　

参考：Google Maps Javascript API V3 Reference

google.maps.ControlPosition.BOTTOM_CENTER 

google.maps.ControlPosition.BOTTOM_LEFT

google.maps.ControlPosition.BOTTOM_RIGHT

google.maps.ControlPosition.LEFT_BOTTOM

google.maps.ControlPosition.LEFT_CENTER

google.maps.ControlPosition.LEFT_TOP

google.maps.ControlPosition.RIGHT_BOTTOM

google.maps.ControlPosition.RIGHT_CENTER

google.maps.ControlPosition.RIGHT_TOP

google.maps.ControlPosition.TOP_CENTER

google.maps.ControlPosition.TOP_LEFT

google.maps.ControlPosition.TOP_RIGHT

 google.maps.ControlPosition.BOTTOM_RIGHTと指定していますが、右下に表示されず

真ん中に表示されています。

これは、他のコントロールが表示されている位置に表示位置を指定した場合に正しく

表示されないこともあるようです。(上記の場合は右下に地図データ....があるた

めに表示されていなのかも)

まとめ

ほとんどこのような形で使うことはないと思います(普通はボタンなどを配置する

と思う)が、スマートフォンを使用して移動した距離を表示させる場合などには使える

のではないかと思います。