Если вам нравится SbUP Форум, вы можете поддержать его - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 и ещё....

 

Нужна помощь с картами гугла

Автор Glava, 18-05-2017, 16:38:22

« назад - далее »
Печать
Вниз Страницы1
Действия пользователя

GlavaTopic starter

18-05-2017, 16:38:22
Всем вечер/день/утро добрый. Никак не могу разобрать с явой, есть лэндинг в котором уже стоит карта гугла и стоит один маркер, нужно поставить еще два, подскажите как можно это сделать :)

Вот я так понял сам кусок:
[spoiler]
Код Выделить
initMap6();
    function initMap6() {

        var customMapType = new google.maps.StyledMapType([{"featureType":"landscape","stylers":[{"saturation":-100},{"visibility":"on"}]}], {
            name: 'Custom Style'

        });
        var customMapTypeId = 'custom_style';

        var map = new google.maps.Map(dоcument.getElementById('map1'), {
            zoom: 17,
            scrollwheel: false,
            center: {lat: 53.210323, lng: 63.637702},
            mapTypeControl: false,
            zoomControl: false,
            zoomControlOptions: {
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            streetViewControl: false,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
            }
        });

        var markerImage = new google.maps.MarkerImage(
            'img/pin.png',
            new google.maps.Size(60,70),
            new google.maps.Point(0,0),
            new google.maps.Point(0,40)
        );

        var marker = new google.maps.Marker({
            icon: markerImage,
            position: {lat: 53.210323, lng: 63.637702},

            map: map
        });

        function ZoomControl(controlDiv, map) {
            controlDiv.style.bottom = '0';
            controlDiv.style.left = 'auto';
            controlDiv.style.right = '90px';
            controlDiv.style.width = '0';

            var controlWrapper = dоcument.createElement('div');
            controlWrapper.style.cursor = 'pointer';
            controlWrapper.style.textAlign = 'center';
            controlWrapper.style.width = '40px';
            controlWrapper.style.height = '90px';
            controlWrapper.style.position = 'absolute';
            controlWrapper.style.bottom = '20px';
            controlWrapper.style.left = 'auto';
            controlWrapper.style.right = '20px';
            controlDiv.appendChild(controlWrapper);

            var zoomInButton = dоcument.createElement('div');
            zoomInButton.style.width = '40px';
            zoomInButton.style.height = '40px';
            zoomInButton.style.backgroundColor = '#ffffff';
            zoomInButton.style.color = '#666666';
            zoomInButton.style.fontWeight = '700';
            zoomInButton.style.fontSize = '25px';
            zoomInButton.style.lineHeight = '40px';
            zoomInButton.style.transition = 'background-color 0.5s ease, color 0.5s ease';
            zoomInButton.style.fontFamily = 'serif';
            zoomInButton.style.borderRadius = '3px';
            zoomInButton.innerHTML = '+';
            controlWrapper.appendChild(zoomInButton);

            var zoomOutButton = dоcument.createElement('div');
            zoomOutButton.style.width = '40px';
            zoomOutButton.style.height = '40px';
            zoomOutButton.style.marginTop = '3px';
            zoomOutButton.style.backgroundColor = 'white';
            zoomOutButton.style.color = '#666666';
            zoomOutButton.style.fontSize = '35px';
            zoomOutButton.style.fontWeight = '700';
            zoomOutButton.style.lineHeight = '3px';
            zoomOutButton.style.transition = 'background-color 0.5s ease, color 0.5s ease';
            zoomOutButton.style.fontFamily = 'serif';
            zoomOutButton.style.borderRadius = '3px';
            zoomOutButton.innerHTML = '_';
            controlWrapper.appendChild(zoomOutButton);

            var Gcontainer = dоcument.getElementById('map1');

            google.maps.event.addDomListener(zoomInButton, 'click', function () {
                map.setZoom(map.getZoom() + 1);
            });
            google.maps.event.addDomListener(zoomOutButton, 'click', function () {
                map.setZoom(map.getZoom() - 1);
            });


        }


        var zoomControlDiv = dоcument.createElement('div');
        var zoomControl = new ZoomControl(zoomControlDiv, map);

        zoomControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(zoomControlDiv);


        google.maps.event.addListener(marker, 'mouseout', function() {
            marker.setIcon(markerImage);
        });
        map.mapTypes.set(customMapTypeId, customMapType);
        map.setMapTypeId(customMapTypeId);


    }[/spoiler]
  •  

ВикторияИ

#1
19-05-2017, 06:32:34
Цитата: Glava от 18-05-2017, 16:38:22
Всем вечер/день/утро добрый. Никак не могу разобрать с явой, есть лэндинг в котором уже стоит карта гугла и стоит один маркер, нужно поставить еще два, подскажите как можно это сделать :)

Вот я так понял сам кусок:
[spoiler]
Код Выделить
initMap6();
    function initMap6() {

        var customMapType = new google.maps.StyledMapType([{"featureType":"landscape","stylers":[{"saturation":-100},{"visibility":"on"}]}], {
            name: 'Custom Style'

        });
        var customMapTypeId = 'custom_style';

        var map = new google.maps.Map(dоcument.getElementById('map1'), {
            zoom: 17,
            scrollwheel: false,
            center: {lat: 53.210323, lng: 63.637702},
            mapTypeControl: false,
            zoomControl: false,
            zoomControlOptions: {
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            streetViewControl: false,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
            }
        });

        var markerImage = new google.maps.MarkerImage(
            'img/pin.png',
            new google.maps.Size(60,70),
            new google.maps.Point(0,0),
            new google.maps.Point(0,40)
        );

        var marker = new google.maps.Marker({
            icon: markerImage,
            position: {lat: 53.210323, lng: 63.637702},

            map: map
        });

        function ZoomControl(controlDiv, map) {
            controlDiv.style.bottom = '0';
            controlDiv.style.left = 'auto';
            controlDiv.style.right = '90px';
            controlDiv.style.width = '0';

            var controlWrapper = dоcument.createElement('div');
            controlWrapper.style.cursor = 'pointer';
            controlWrapper.style.textAlign = 'center';
            controlWrapper.style.width = '40px';
            controlWrapper.style.height = '90px';
            controlWrapper.style.position = 'absolute';
            controlWrapper.style.bottom = '20px';
            controlWrapper.style.left = 'auto';
            controlWrapper.style.right = '20px';
            controlDiv.appendChild(controlWrapper);

            var zoomInButton = dоcument.createElement('div');
            zoomInButton.style.width = '40px';
            zoomInButton.style.height = '40px';
            zoomInButton.style.backgroundColor = '#ffffff';
            zoomInButton.style.color = '#666666';
            zoomInButton.style.fontWeight = '700';
            zoomInButton.style.fontSize = '25px';
            zoomInButton.style.lineHeight = '40px';
            zoomInButton.style.transition = 'background-color 0.5s ease, color 0.5s ease';
            zoomInButton.style.fontFamily = 'serif';
            zoomInButton.style.borderRadius = '3px';
            zoomInButton.innerHTML = '+';
            controlWrapper.appendChild(zoomInButton);

            var zoomOutButton = dоcument.createElement('div');
            zoomOutButton.style.width = '40px';
            zoomOutButton.style.height = '40px';
            zoomOutButton.style.marginTop = '3px';
            zoomOutButton.style.backgroundColor = 'white';
            zoomOutButton.style.color = '#666666';
            zoomOutButton.style.fontSize = '35px';
            zoomOutButton.style.fontWeight = '700';
            zoomOutButton.style.lineHeight = '3px';
            zoomOutButton.style.transition = 'background-color 0.5s ease, color 0.5s ease';
            zoomOutButton.style.fontFamily = 'serif';
            zoomOutButton.style.borderRadius = '3px';
            zoomOutButton.innerHTML = '_';
            controlWrapper.appendChild(zoomOutButton);

            var Gcontainer = dоcument.getElementById('map1');

            google.maps.event.addDomListener(zoomInButton, 'click', function () {
                map.setZoom(map.getZoom() + 1);
            });
            google.maps.event.addDomListener(zoomOutButton, 'click', function () {
                map.setZoom(map.getZoom() - 1);
            });


        }


        var zoomControlDiv = dоcument.createElement('div');
        var zoomControl = new ZoomControl(zoomControlDiv, map);

        zoomControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(zoomControlDiv);


        google.maps.event.addListener(marker, 'mouseout', function() {
            marker.setIcon(markerImage);
        });
        map.mapTypes.set(customMapTypeId, customMapType);
        map.setMapTypeId(customMapTypeId);


    }[/spoiler]


попробуйте глянуть код в программе notepad++. При наведении курсора мышки на начало тега, красным подсвечивается его начало и конец (открывающий и закрывающий). Лично я таким образом легко поняла логику создания маркеров в Я-картах, а с Гуглем еще не работала, но думаю что принцип примерно такой-же.
  •  

GlavaTopic starter

#2
19-05-2017, 15:43:36
Цитата: ВикторияИ от 19-05-2017, 06:32:34
попробуйте глянуть код в программе notepad++. При наведении курсора мышки на начало тега, красным подсвечивается его начало и конец (открывающий и закрывающий). Лично я таким образом легко поняла логику создания маркеров в Я-картах, а с Гуглем еще не работала, но думаю что принцип примерно такой-же.
я сам в языке бум бум:)) пробовал найти, что то добавить, что то подставить результата не дало(
  •  

axiro

#3
19-05-2017, 17:02:45
 var marker = new google.maps.Marker({
            icon: markerImage,
            position: {lat: 53.210323, lng: 63.637702},

            map: map
        });


Координаты маркера, если нужно - создаёте ещё 1 блок (тот же самый код, только с координатами вашими).
  •  
Печать
Вверх Страницы1
Действия пользователя

Если вам нравится SbUP Форум, вы можете поддержать его - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 и ещё....