آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 19) - نمونه های دیگر - قسمت 1

ساخت وبلاگ

آخرین مطالب

امکانات وب

آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 19) - نمونه های دیگر - قسمت 1

<!DOCTYPE html>

<html>

  <head>

    <title>Complex styled maps</title>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="utf-8">

    <style>

      html, body {

        height: 100%;

        margin: 0;

        padding: 0;

      }

      #map {

        width: 580px;

        height: 400px;

      }

    </style>

  </head>

  <body>

    <div id="map"></div>

    <script>

      function initMap() {

        var usRoadMapType = new google.maps.StyledMapType([

            {

              featureType: 'road.highway',

              elementType: 'geometry',

              stylers: [

                {hue: '#ff0022'},

                {saturation: 60},

                {lightness: -20}

              ]

            }, {

              featureType: 'road.arterial',

              elementType: 'all',

              stylers: [

                {hue: '#2200ff'},

                {lightness: -40},

                {visibility: 'simplified'},

                {saturation: 30}

              ]

            }, {

              featureType: 'road.local',

              elementType: 'all',

              stylers: [

                {hue: '#f6ff00'},

                {saturation: 50},

                {gamma: 0.7},

                {visibility: 'simplified'}

              ]

            }, {

              featureType: 'water',

              elementType: 'geometry',

              stylers: [

                {saturation: 40},

                {lightness: 40}

              ]

            }, {

              featureType: 'road.highway',

              elementType: 'labels',

              stylers: [

                {visibility: 'on'},

                {saturation: 98}

              ]

            }, {

              featureType: 'administrative.locality',

              elementType: 'labels',

              stylers: [

                {hue: '#0022ff'},

                {saturation: 50},

                {lightness: -10},

                {gamma: 0.90}

              ]

            }, {

              featureType: 'transit.line',

              elementType: 'geometry',

              stylers: [

                {hue: '#ff0000'},

                {visibility: 'on'},

                {lightness: -70}

              ]

            }

          ], {name: 'US Road Atlas'});

        var map = new google.maps.Map(document.getElementById('map'), {

          zoom: 12,

          center: {lat: 41.85, lng: -87.65},

          mapTypeControlOptions: {

            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']

          }

        });

        map.mapTypes.set('usroadatlas', usRoadMapType);

        map.setMapTypeId('usroadatlas');

      }

    </script>

    <script async defer

    src="https://maps.googleapis.com/maps/api/js?callback=initMap">

    </script>

  </body>

</html>

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 253 تاريخ : شنبه 2 مرداد 1395 ساعت: 9:43

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه