Маркеры

@Арти7030 · Регистрация: 27.12.2012

Author24 — интернет-сервис помощи студентам

Для каждого места нужно установить свою иконку. Где это надо менять? Куда смотреть?

Javascript

<script>
        $(function () {
            google.maps.event.addDomListener(window, 'load', init);
 
            function init() {
                var mapOptions = {
                    zoom: 13,
                    center: new google.maps.LatLng(56.009787, 92.8369563),
                    scrollwheel: false,
                            var mapElement = document.getElementById('contacts_map');
                var infowindow = new google.maps.InfoWindow();
                var map = new google.maps.Map(mapElement, mapOptions);
                var markerImage = {
                    url: '/images/pointer.svg',
                    size: new google.maps.Size(40, 60),
                    anchor: new google.maps.Point(19, 41) //half-width
                };
                var locations = [
                    { "name": "660021 г. Красноярск, пр-т Мира 115 а", "lat": "56.009787", "lng": "92.8369563"},
                    { "name": "Железнодорожный вокзал", "lat": "56.0050813", "lng": "92.8329795" },
                    { "name": "Площадь", "lat": "56.008889", "lng": "92.840389" },
                    { "name": "Красноярский Музыкальный Театр", "lat": "56.0098716", "lng": "92.8354207" },
                    { "name": "Паркковка", "lat": "56.009639", "lng": "92.839056" },
                    { "name": "Паркковка", "lat": "56.009333", "lng": "92.842944" }
                ];
 
                $.each(locations, function (i, point) {
                    var markerPosition = new google.maps.LatLng(point.lat, point.lng);
                    var marker = new google.maps.Marker({
                        position: markerPosition,
                        icon: markerImage,
                        map: map,
                        title: point.name
                    });
                    google.maps.event.addListener(marker, 'click', function () {
                        map.setZoom(16);
                        map.panTo(this.getPosition());
                        infowindow.setContent(this.title);
                        infowindow.open(map, this);
                    });
                });
                
            }
        });
    </script>

@ole_zha · 08.11.2016, 11:59

попробуйте перед началом кода задать переменные

Javascript

1
2
3

var customIcons = {
      theatre: {icon: '../yourpath/img.png'},
      parking: {icon: '../yourpath/img2.png'}};

потом в информации маркера

Javascript

1	{ "name": "660021 г. Красноярск, пр-т Мира 115 а", "lat": "56.009787", "lng": "92.8369563"}

попробуйте добавить "type":"theatre" например

а в определении самого маркера

Javascript

 
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
//добавить вот это ↓
            icon: icon.icon});

Возможно это Вам поможет, либо навеет на определенные мысли

@Арти7030 · 08.11.2016, 13:10 **[ТС]**

ole_zha, спасибо. Навело практические мысли.
Выкладываю рабочий вариант, чтобы следующее поколение не мучилось:

Javascript

var locations = [
     { "name": "660021 г. Красноярск, пр-т Мира 115 а", "lat": "56.009787", "lng": "92.8369563", "type":"/images/pointer.svg"},
     { "name": "Железнодорожный вокзал", "lat": "56.0050813", "lng": "92.8329795", "type":"/images/maps-mark/vokzal.svg" },
     { "name": "Площадь", "lat": "56.008889", "lng": "92.840389", "type":"/images/maps-mark/ploshad.svg" },
     { "name": "Красноярский Музыкальный Театр", "lat": "56.0098716", "lng": "92.8354207", "type":"/images/maps-mark/teatr.svg" },
     { "name": "Паркковка", "lat": "56.009639", "lng": "92.839056", "type":"/images/maps-mark/parkovka.svg" },
     { "name": "Паркковка", "lat": "56.009333", "lng": "92.842944", "type":"/images/maps-mark/parkovka.svg" }
];

Javascript

1	icon: point.type,

@Roman71 · 13.12.2016, 15:47

Здравствуйте.
У меня такой специфический вопрос, я почти доделал сайт по недвижимости с возможностью онлайн редактирования текстовой информации на визуальном поле html страницы в окне браузера. С API Google или Yandex у меня не достаточно знаний, что бы профи знать как с ними работать. И для этого я выбрал карты http://4geo.ru/ т.к. у них имеется возможность ввода адреса в скрипт обычным текстом, в тело скрипта.
Но для того чтобы при изменении в строке адреса продеваемого объекта (текстовой информации) после завершения редактирования и сохранения результатов на сервере, требуется, что бы по этому адресу изменялся и визуальное расположение маркера нового объекта на новом месте, на интерактивной карте города.
Для этого можете подсказать, как можно сделать, что бы в строке кода html страницы ввести какие либо команды, после чего на экране монитора отображались бы (появлялись) слова Таганрог, а так же Фрунзе, что бы я имел возможность с помощью онлайн редактора интернет страниц, менять этот текст, а он в свою очередь будет давать скрипту возможность отображать новый адрес на интерактивной карте города:

<a href="javascript:map.locateBuilding({town:'Таганрог', street: 'Фрунзе', building: '3'});"</a>

или эти же изменения в основном теле скрипта:

<script type="text/javascript" src="http://4geo.ru/maps/js/4geoAPI.js" ></script>
</head>
<body>
<div id="map_frame" class="frame" style="width:500px; height:675px;"></div>
</body>
<script type="text/javascript">
var options = {town: 'Таганрог', street: 'ул. Фрунзе', building: '3'};
var map = new geoAPI.maps.Map(document.getElementById('map_frame'), options);
</script>

@Roman71 0 / 0 / 0 Регистрация: 03.10.2016 Сообщений: 28
	13.12.2016, 15:47	4
	Здравствуйте. У меня такой специфический вопрос, я почти доделал сайт по недвижимости с возможностью онлайн редактирования текстовой информации на визуальном поле html страницы в окне браузера. С API Google или Yandex у меня не достаточно знаний, что бы профи знать как с ними работать. И для этого я выбрал карты http://4geo.ru/ т.к. у них имеется возможность ввода адреса в скрипт обычным текстом, в тело скрипта. Но для того чтобы при изменении в строке адреса продеваемого объекта (текстовой информации) после завершения редактирования и сохранения результатов на сервере, требуется, что бы по этому адресу изменялся и визуальное расположение маркера нового объекта на новом месте, на интерактивной карте города. Для этого можете подсказать, как можно сделать, что бы в строке кода html страницы ввести какие либо команды, после чего на экране монитора отображались бы (появлялись) слова Таганрог, а так же Фрунзе, что бы я имел возможность с помощью онлайн редактора интернет страниц, менять этот текст, а он в свою очередь будет давать скрипту возможность отображать новый адрес на интерактивной карте города: <a href="javascript:map.locateBuilding({town:'Таганрог', street: 'Фрунзе', building: '3'});"</a> или эти же изменения в основном теле скрипта: <script type="text/javascript" src="http://4geo.ru/maps/js/4geoAPI.js" ></script> </head> <body> <div id="map_frame" class="frame" style="width:500px; height:675px;"></div> </body> <script type="text/javascript"> var options = {town: 'Таганрог', street: 'ул. Фрунзе', building: '3'}; var map = new geoAPI.maps.Map(document.getElementById('map_frame'), options); </script> 0