Google Maps v3 marker і infowindow

Невеличка мапа з marker'ами і infowindow'ами. Робочий варіант зроблено для газети "Тернопіль вечірній".
Не дуже мені подобається як вписані координати, але в наступному таску вже оптимізую, бо в цьому варіанті надто довго вводились координати.

<!DOCTYPE html>
<html>
<head>
    <title>Пункти набору води в Тернополі</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        infos = [];

        function initialize() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 13,
                center: new google.maps.LatLng(49.553517,25.599367),
                mapTypeId: google.maps.MapTypeId.TERRAIN
            });

            var image = new google.maps.MarkerImage(
                    'http://t-v.te.ua/media/icons/waterdrop.png',
                    new google.maps.Size(32,37),
                    new google.maps.Point(0,0),
                    new google.maps.Point(16,37)
            );

            var shadow = new google.maps.MarkerImage(
                    'http://t-v.te.ua/media/icons/shadow.png',
                    new google.maps.Size(54,37),
                    new google.maps.Point(0,0),
                    new google.maps.Point(16,37)
            );

            var shape = {
                coord: [29,0,30,1,31,2,31,3,31,4,31,5,31,6,31,7,31,8,31,9,31,10,31,11,31,12,31,13,31,14,31,15,31,16,31,17,31,18,31,19,31,20,31,21,31,22,31,23,31,24,31,25,31,26,31,27,31,28,31,29,30,30,29,31,23,32,22,33,21,34,20,35,19,36,12,36,11,35,10,34,9,33,8,32,2,31,1,30,0,29,0,28,0,27,0,26,0,25,0,24,0,23,0,22,0,21,0,20,0,19,0,18,0,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,0,3,0,2,1,1,2,0,29,0],
                type: 'poly'
            };


            var marker_data = new Array(
                {
                    "lat": 49.55754,
                    "lon": 25.600934,
                    "info": 'вул. Городня, 3'
                },
                {
                    "lat": 49.558931,
                    "lon": 25.600934,
                    "info": 'вул. Квіткова, 7'
                },
                {
                    "lat": 49.558845,
                    "lon": 25.605833,
                    "info": 'вул. Квіткова, 17'
                },
                {
                    "lat": 49.558486,
                    "lon": 25.623937,
                    "info": 'вул. Євгена Коновальця, 20'
                },
                {
                    "lat": 49.55498,
                    "lon": 25.647893,
                    "info": 'вул. Корольова, 8'
                },
                {
                    "lat": 49.552496,
                    "lon": 25.596755,
                    "info": 'вул. Олени Кульчицької, 9'
                },
                {
                    "lat": 49.548563,
                    "lon": 25.553841,
                    "info": 'вул. Бережанська, 53'
                },
                {
                    "lat": 49.544802,
                    "lon": 25.575731,
                    "info": 'вул. Дружби, 6'
                },
                {
                    "lat": 49.544802,
                    "lon": 25.575721,
                    "info": 'вул. Дружби, 1'
                },
                {
                    "lat": 49.561946,
                    "lon": 25.604931,
                    "info": 'вул. Лозовецька, 4'
                },
                {
                    "lat": 49.550777,
                    "lon": 25.568645,
                    "info": 'вул. Гетьмана Мазепи, 7'
                },
                {
                    "lat": 49.55804,
                    "lon": 25.64666,
                    "info": 'вул. Василя Стуса, 6'
                },
                {
                    "lat": 49.558098,
                    "lon": 25.560745,
                    "info": 'вул. Тернопільська, 2'
                },
                {
                    "lat": 49.561109,
                    "lon": 25.562083,
                    "info": 'вул. Хліборобна, 30'
                },
                {
                    "lat": 49.552493,
                    "lon": 25.570616,
                    "info": 'вул. Чумацька, 25'
                },
                {
                    "lat": 49.537832,
                    "lon": 25.596608,
                    "info": 'вул. Чернівецька, 13'
                },
                {
                    "lat": 49.540207,
                    "lon": 25.603161,
                    "info": 'вул. Садова, 4'
                },
                {
                    "lat": 49.552556,
                    "lon": 25.592973,
                    "info": 'вул. Мостова, 13'
                },
                {
                    "lat": 49.523277,
                    "lon": 25.605182,
                    "info": 'вул. Микулинецька, 48'
                },
                {
                    "lat": 49.546598,
                    "lon": 25.598245,
                    "info": 'вул. Острозького, 44'
                },
                {
                    "lat": 49.554734,
                    "lon": 25.591591,
                    "info": 'вул. Грушевського, 7'
                },
                {
                    "lat": 49.558937,
                    "lon": 25.590875,
                    "info": 'вул. Броварна, 10'
                },
                {
                    "lat": 49.560114,
                    "lon": 25.586896,
                    "info": 'вул. Білецька, 19'
                },
                {
                    "lat": 49.542154,
                    "lon": 25.600716,
                    "info": 'вул. Софії Стадникової, 19'
                },
                {
                    "lat": 49.560779,
                    "lon": 25.600199,
                    "info": 'вул. Збаразька, 5'
                },
                {
                    "lat": 49.552556,
                    "lon": 25.592965,
                    "info": 'вул. Валова, 7'
                }
            );

            for (var x = 0; x < marker_data.length; x++) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(marker_data[x]['lat'],marker_data[x]['lon']),
                    map: map,
                    shape: shape,
                    raiseOnDrag: false,
                    icon: image,
                    shadow: shadow,
                    content:'<div class="info-window-content"><p>' + marker_data[x]['info'] + '</p></div>',
                });

                google.maps.event.addListener(marker, 'click', function() {
                    closeInfos();
                    var info = new google.maps.InfoWindow({content: this.content});
                    info.open(map,this);
                    infos[0]=info;
                });
            }

            google.maps.event.addListener(map, 'click', function() {
                closeInfos();
            });

        }

        function closeInfos(){
            if(infos.length > 0){
                infos[0].set("marker", null);
                infos[0].close();
                infos.length = 0;
            }
        }
    </script>
</head>
<body onload="initialize()">
    <div id="map" style="width: 600px; height: 600px;"></div>
</body>
</html>

Немає коментарів: