1. Уважаемые пользователи, прежде чем ответить в теме или создать новую,
    внимательно ознакомьтесь с правилами раздела

    Кому лень работать или руки не оттуда - пользуйтесь услугами специалистов
  2. Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.."

    Есть JED!!! Ищите там!!!

Помощь Нужно сделать ч/б гугл карту с цветным собственным маркером.

Тема в разделе "Joomla", создана пользователем zditovetsky, 13 июл 2015.

Информация :
  • Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с правилами раздела
  • Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.." Есть JED!!! Ищите там!!!
  • Аналоги ищите там же - на JED!!!
  • Новая версия? - У кого будет - тот выложит!
Модераторы: arman29, DMS, Genk0
  1. zditovetsky

    zditovetsky Постоялец

    Регистр.:
    20 май 2014
    Сообщения:
    81
    Симпатии:
    10
    Доброго времени суток. У меня стоит задача, возможно кто сталкивался. Нужно вставить на сайт, гугл карту, с собственным маркером, но сама карта должна быть черно-белой. В виджетките 2.4.2 глубокие настройки цвета карты, но нет возможности вставить свой маркер. Установил модуль BT Google Maps, поставил маркер, но через настройки нет возможности обесцветить карту, пришлось это делать через -webkit-filter grayscale, но никак не могу подкопаться к маркеру что-бы его сделать цветным. Вот в шаблоне пример того что должно получиться http://artbees.net/themes/jupiter/callisto/contact-us/
    Может кто подскажет какой-нибудь модуль или способ реализации.
     
  2. ddn128

    ddn128

    Регистр.:
    31 июл 2013
    Сообщения:
    374
    Симпатии:
    163
    так пробовали?
     
  3. sankt

    sankt Создатель

    Регистр.:
    4 май 2012
    Сообщения:
    27
    Симпатии:
    7
  4. kolio

    kolio Постоялец

    Регистр.:
    21 фев 2012
    Сообщения:
    101
    Симпатии:
    38
    если вы обесцветили всё с помощью движка браузера - это не выход

    собственно сам код:
    Код:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Google Maps JavaScript API v3 пример: Styled MapTypes</title>
    <link rel="nofollow" href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script>
    var map;
    var nnovgorod = new google.maps.LatLng(56.316537, 43.998779);
    var MY_MAPTYPE_ID = 'mystyle';
    function initialize() {
    var stylez =  [
        {
            "featureType": "landscape",
            "stylers": [
                {
                    "saturation": -100
                },
                {
                    "lightness": 65
                },
                {
                    "visibility": "on"
                }
            ]
        },
        {
            "featureType": "poi",
            "stylers": [
                {
                    "saturation": -100
                },
                {
                    "lightness": 51
                },
                {
                    "visibility": "simplified"
                }
            ]
        },
        {
            "featureType": "road.highway",
            "stylers": [
                {
                    "saturation": -100
                },
                {
                    "visibility": "simplified"
                }
            ]
        },
        {
            "featureType": "road.arterial",
            "stylers": [
                {
                    "saturation": -100
                },
                {
                    "lightness": 30
                },
                {
                    "visibility": "on"
                }
            ]
        },
        {
            "featureType": "road.local",
            "stylers": [
                {
                    "saturation": -100
                },
                {
                    "lightness": 40
                },
                {
                    "visibility": "on"
                }
            ]
        },
        {
            "featureType": "transit",
            "stylers": [
                {
                    "saturation": -100
                },
                {
                    "visibility": "simplified"
                }
            ]
        },
        {
            "featureType": "administrative.province",
            "stylers": [
                {
                    "visibility": "off"
                }
            ]
        },
        {
            "featureType": "water",
            "elementType": "labels",
            "stylers": [
                {
                    "visibility": "on"
                },
                {
                    "lightness": -25
                },
                {
                    "saturation": -100
                }
            ]
        },
        {
            "featureType": "water",
            "elementType": "geometry",
            "stylers": [
                {
                    "hue": "#ffff00"
                },
                {
                    "lightness": -25
                },
                {
                    "saturation": -97
                }
            ]
        }
    ];
      var mapOptions = {
        zoom: 12,
        center: nnovgorod,
        mapTypeControlOptions: {
           mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
        },
        mapTypeId: MY_MAPTYPE_ID
      };
      map = new google.maps.Map(document.getElementById("map_canvas"),
          mapOptions);
      var styledMapOptions = {
        name: "Мой стиль"
      };
      var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
      map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
    
    marker = new google.maps.Marker({
        map:map,
        position: new google.maps.LatLng(59.32522, 18.07002),
        icon: 'colored.png'
      });
    
    }
    </script>
    </head>
    <body onload="initialize()">
      <div id="map_canvas" style="width: 800px; height: 600px;"></div>
    </body>
    </html>
    только сделайте после этого маленький зум - я маркер разместил около Швеции
    ну и не забудьте файлик colored.png свой какой-то в папку с этим html кинуть
     
  5. Bannikow

    Bannikow Создатель

    Регистр.:
    2 апр 2014
    Сообщения:
    15
    Симпатии:
    1
    API Карт Google в помощь, фукция StyledMapType. во вложении пример скомпилированного стиля карты
     

    Вложения:

  6. klbsss

    klbsss Писатель

    Регистр.:
    24 ноя 2014
    Сообщения:
    1
    Симпатии:
    0
    WidgetKit умеет