Карта google с красивым окошком информации


На карте можно отобразить любое красивое окошко с информацией.

Для того, чтобы сделать красивое окошко - красивый блок для отображения информации на карте, следует применить плагин infobox

Плагин можно скачать по ссылке

А дальше все просто:

Код HTML
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="infobox.js"></script>

<script type="text/javascript">
    /* Карта с адресом */
    var map;
    function initialize() {
        var mapOptions = {
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
            },
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL
            },
            disableDefaultUI: true,
            panControl: true,
            scrollwheel: false,
            center: new google.maps.LatLng(55.758293,37.6267443),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var theMap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);


        var boxText = document.createElement("div"); // собственно создаем красивый блок
        boxText.setAttribute('id','boxText'); // задаем этому блоку id
        var contentBoxText = ''; // а теперь вставляем в этот блок то что нам нужно
        contentBoxText = '<span id="map_moscow">КРЕМЛЬ</span>';
        contentBoxText += '<div id="map_addres">';
        contentBoxText +=   '<div>САМОЕ ГЛАВНОЕ СТРОЕНИЕ</div>';
        contentBoxText +=   '<div style="font-size:15px;">СТРАНЫ</div>';
        contentBoxText +=   '<div id="map_arrow"></div>';
        contentBoxText += '</div>';
        boxText.innerHTML = contentBoxText;

        var myOptions = {
            content: boxText
            ,closeBoxMargin: '-20000px'
            ,position: new google.maps.LatLng(55.752183, 37.6178616)
            ,pixelOffset: new google.maps.Size(0, -160)
        };

        var ib = new InfoBox(myOptions);
        ib.open(theMap);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>


Вверх