جستجو
زمانی که متن خود را وارد می نمایید در صورت وجود اطلاعات ، اطلاعات مورد نظر بصورت همزمان و بدون زدن هیچ دکمه ای نمایش داده می شود.
عضویت در خبرنامه
جهت لغو عضویت کلیک نمایید
شمارشگر شبکه های اجتماعی
پسندیده
0
فیسبوک
0
توییتر
0
گوگل پلاس
13
لینک ادین
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
تبلیغات
آخرین تصاویر
شهر تاریخی جیزد باغ شازده ماهان عمارت و باغ نشاط (سالار) تقی آباد غار پرده رستم کاروانسرای شاه عباس یونسی حلزون اسب در کوهستان بچه پنگوئن بچه میمون ديگو کاستا دنی آلوز میامی هیت پیرلو فرانچسکو توتی لیونل مسی طوطی دریا جاده زمستانی گورخر ... ... پل کلبه ببر
وضعیت آب و هوا
  • یزد
  • ارومیه
  • اصفهان
  • البرز
  • مشهد
  • شیراز
  • تبریز
  • تهران
  • زاهدان
  • اهواز
  • زنجان
  • رامسر
  • بابلسر
  • کرمانشاه
  • بندرعباس
  • کرمان
  • گرگان
  • یاسوج
  • همدان
  • آبادان
  • مکه
موضوعات مشابه