آموزش استفاده از نقشه گوگل در صفحات وب - 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>

سون لرن • آموزش...

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

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

صفحه بندی

آرشیو مطالب

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

لینک دوستان

خبرنامه