جستجو
زمانی که متن خود را وارد می نمایید در صورت وجود اطلاعات ، اطلاعات مورد نظر بصورت همزمان و بدون زدن هیچ دکمه ای نمایش داده می شود.
عضویت در خبرنامه
جهت لغو عضویت کلیک نمایید
شمارشگر شبکه های اجتماعی
پسندیده
0
فیسبوک
0
توییتر
0
گوگل پلاس
0
لینک ادین
11
نمودار بازدید از موضوع ها
نویسنده : 9lessons.info تعداد بازدید : ۵۷۷ تاریخ : سه شنبه,۳۰ دی ۱۳۹۳
سفارشی کردن گوگل مپ
امتیاز دهید
تعداد رای 0 امتیاز 0

یک سرویس جالب گوگل این است که شما می توانید بر روی نقشه های گوگل تنظیمات سفارشی(رنگ تم) انجام دهید و آن را در وبسایت و یا نرم افزار خود بکار گیرید.در این پست با چند خط ساده تم مربوط به نقشه گوگل مپ را تغییر خواهیم داد.

کد پیشفرض گوگل مپ

<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 Code
<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(start,end);

function initialize() 
{
var mapOptions = {
backgroundColor: "#ffffff", // background color
zoom: 8, // map zoom position
disableDefaultUI: true,
draggable: false,
scrollwheel: false,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//----------- Styles Start----------
styles: [
{
   "featureType": "landscape.natural",
   "elementType": "geometry.fill",
   "stylers": [
   { "color": "#ffffff" }
    ]
},
{
   "featureType": "landscape.man_made",
   "stylers": [
   { "color": "#ffffff" },
   { "visibility": "off" }
   ]
},
{
   "featureType": "water",
   "stylers": [
   { "color": "#80C8E5" },  // applying map water color
   { "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" }
   ]
}
]
//------------Styles End--------------
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
//HTML Code
<div id="map-canvas" style="height:100%"></div>

اضافه کردن نشانگر

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var mapCoordinates = new google.maps.LatLng(star,end);

var markers = [];
var image = new google.maps.MarkerImage( "9lessons.png", // icon
new google.maps.Size(84,56), // icon dimensions width and height in pixels 
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(); // calling function
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
//HTML Code
<div id="map-canvas" style="height:100%"></div>

comments powered by Disqus
تبلیغات
آخرین تصاویر
شهر تاریخی جیزد باغ شازده ماهان عمارت و باغ نشاط (سالار) تقی آباد غار پرده رستم کاروانسرای شاه عباس یونسی حلزون اسب در کوهستان بچه پنگوئن بچه میمون ديگو کاستا دنی آلوز میامی هیت پیرلو فرانچسکو توتی لیونل مسی طوطی دریا جاده زمستانی گورخر ... ... پل کلبه ببر
وضعیت آب و هوا
  • یزد
  • ارومیه
  • اصفهان
  • البرز
  • مشهد
  • شیراز
  • تبریز
  • تهران
  • زاهدان
  • اهواز
  • زنجان
  • رامسر
  • بابلسر
  • کرمانشاه
  • بندرعباس
  • کرمان
  • گرگان
  • یاسوج
  • همدان
  • آبادان
  • مکه
موضوعات مشابه
پایان عمر گوگل ریدر و ساخت یک خبر خوان با PHP

پایان عمر گوگل ریدر و ساخت یک خبر خوان با PHP

   تعداد بازدید: ۴۹۵
آموزش تنظیمات در فایل .htaccess

آموزش تنظیمات در فایل .htaccess

   تعداد بازدید: ۷۷۰
کلاس آماده ساخت متن لورم ایپسوم

کلاس آماده ساخت متن لورم ایپسوم

   تعداد بازدید: ۴۲۸
بازی Snake(مار) با HTML5

بازی Snake(مار) با HTML5

   تعداد بازدید: ۳۹۶
خواندن ایمیل ها با php

خواندن ایمیل ها با php

   تعداد بازدید: ۳۸۸