Opencart - Оформление Карт Google Под Себя

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 6 июл 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.321
    Симпатии:
    76.775
    Репутация:
    170
    2016-07-07_012531.png
    Знаете ли вы, что у нас есть возможность полностью контролировать стили отображения карт Google. Сегодня мы покажем, как это использовать.

    Код:
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    var map;
    var mapCoordinates = new google.maps.LatLng(Latitude_Value,Longitude_Value);
    
    function initialize()
    {
    var mapOptions = {
    zoom: 8,
    center: mapCoordinates,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    //HTML код
    <div id="map-canvas" style="height:100%"></div>
    
    Добавление стилей
    Код:
    styles:[
    {
        "featureType": "transit.station.rail",
        "stylers": [
             { "visibility": "on" },
             { "invert_lightness": true },
             { "color": "#808080" },
             { "weight": 0.1 },
             { "saturation": 1 },
             { "lightness": 1 },
             { "gamma": 1 }
          ]
    },
    {
    ....
    }
    ]
    
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    var map;
    var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);
    
    function initialize()
    {
    var mapOptions = {
    backgroundColor: "#ffffff", // цвет фона
    zoom: 8, // масштаб
    disableDefaultUI: true,
    draggable: false,
    scrollwheel: false,
    center: mapCoordinates,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    //----------- стили ----------
    styles: [
    {
       "featureType": "landscape.natural",
       "elementType": "geometry.fill",
       "stylers": [
       { "color": "#ffffff" }
        ]
    },
    {
       "featureType": "landscape.man_made",
       "stylers": [
       { "color": "#ffffff" },
       { "visibility": "off" }
       ]
    },
    {
       "featureType": "water",
       "stylers": [
       { "color": "#80C8E5" },  // цвет для воды
       { "saturation": 0 }
       ]
    },
    {
       "featureType": "road.arterial",
       "elementType": "geometry",
       "stylers": [
       { "color": "#999999" }
        ]
    }
    ,{
       "elementType": "labels.text.stroke",
       "stylers": [
       { "visibility": "off" }
      ]
    }
    ,{
       "elementType": "labels.text",
       "stylers": [
       { "color": "#333333" }
       ]
    }
    ,{
       "featureType": "poi",
       "stylers": [
       { "visibility": "off" }
       ]
    }
    ]
    //------------конец --------------
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    //HTML код
    <div id="map-canvas" style="height:100%"></div>
    
    Инструмент для оформления карт Google
    Так же вы можете воспользоваться специальным инструментом для оформления карт.

    Код:
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    var map;
    var mapCoordinates = new google.maps.LatLng(13.0630171, 80.2296082);
    
    var markers = [];
    var image = new google.maps.MarkerImage( '9lessons.png', // иконка
    new google.maps.Size(84,56), // размеры иконок
    new google.maps.Point(0,0),
    new google.maps.Point(42,56)
    );
    
    function addMarker()
    {
    markers.push(new google.maps.Marker({
    position: mapCoordinates,
    raiseOnDrag: false,
    icon: image,
    map: map,
    draggable: false
    }));
    }
    
    function initialize()
    {
    var mapOptions = {
    .......
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    addMarker(); // вызов функции
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    //HTML код
    <div id="map-canvas" style="height:100%"></div>
    
     

    Вложения:

    • demo.zip
      Размер файла:
      3,7 КБ
      Просмотров:
      4
    Yanar и Artyom нравится это.
  2. Offline

    Artyom Пользователь

    Сообщения:
    17
    Симпатии:
    0
    Репутация:
    0
    спасибо
     
  3. Offline

    Yanar Пользователь

    Сообщения:
    9
    Симпатии:
    0
    Репутация:
    0
    спасибо