نوشتن یک نظر توجه: برای انتشار نقشه پارسی جو به هیچ وجه استفاده از راهکار زیر پیشنهاد نمیشود و ممکن است در آینده با اعمال محدودیت های بیشتر گوگل، نمایش نقشه شما با مشکل مواجه گردد.
برای انتشار نقشه پارسی جو پیشنهاد میکنیم از پلاگین وردپرس نقشه پارسی جو یا ویورهای لیف لت یا اوپن لایر استفاده نمایید.
نحوه نمایش نقشه پارسی جو با استفاده از گوگل
نمایش نقشه پارسی جو با استفاده از گوگل بسیار ساده است. در ادامه نحوه انتشار نقشه پارسی جو با استفاده از گوگل شرح داده شده است.
گام اول: آماده سازی صفحه:
برای استفاده از گوگل ابتدا باید فایل JavaScript کتابخانه را در تگ head ارجاع داد:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
سپس یک div با یک Id مشخص را به تگ body اضافه میکنیم. div مورد نظر باید از ارتفاع مشخصی برخوردار باشد که به سادگی به صورت زیر تعریف میگردد:
<div id="googleMap" style="width:100%;height:400px;"></div>
پس از انجام مقدمات اکنون می‌توان یک نقشه را با تنظیمات دلخواه در div تعریف شده نمایش داد.
گام دوم: فراخوانی نقشه:
به وسیله کد زیر که در تگ script قرار می گیرد نقشه را فراخوانی می کنیم
<script>
var element = document.getElementById("googleMap");
var map= new google.maps.Map(element, {
center:new google.maps.LatLng(31.8790761,54.339135),
zoom:5,
mapTypeId: "ParsijooMap",
mapTypeControl: false,
streetViewControl: false
});
//Define Parsijoo map type pointing at the ParsijooMap tile server
map.mapTypes.set("ParsijooMap", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
// "Wrap" x (logitude) at 180th meridian properly
// NB: Don't touch coord.x because coord param is by reference, and changing its x property breakes something in Google's lib
var tilesPerGlobe = 1 << zoom;
var x = coord.x % tilesPerGlobe;
if (x < 0) {
x = tilesPerGlobe+x;
}
// Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll
return "https://developers.parsijoo.ir/web-service/v1/map/?type=tile"+"&" +"x=" + x + "&" +"y=" + coord.y + "&" +"z=" + zoom +"&" + "apikey=b79aa829a62541e1897c1fcc2807a177";
},
tileSize: new google.maps.Size(256, 256),
name: "ParsijooMap",
maxZoom: 18
}));
</script>
توجه: در بخش "apikey=" به جای متن مشخص شده کلیدapi دریافتی از پارسی جو را وارد نمایید. (راهنمای دریافت API Key)
توجه: در صورت عدم استفاده از API Key اختصاصی خود، ممکن است نمایش نقشه در وب سایت شما با اختلال مواجه شود.
توجه: (center:new google.maps.LatLng(31.8790761,54.339135 => در این بخش مختصات مرکز نمایش نقشه وارد می شود.
گام پایانی: اسکریپت زیر را در ادامه قرار دهید.
<script type="text/javascript"> Object.defineProperty(HTMLScriptElement.prototype, "__src__", Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, "src")); Object.defineProperty(HTMLScriptElement.prototype, "src", { configurable: true, enumerable: true, get() { return this.__src__; }, set(new_src) { if (!new_src || !(new_src.startsWith("https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate") || new_src.startsWith("https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent"))) this.__src__ = new_src; } }); </script>
نتیجه نهایی به صورت زیر می باشد:
<html>
<body>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="googleMap" style="width:100%;height:400px;">
<script>
var element = document.getElementById("googleMap");
var map= new google.maps.Map(element, {
center:new google.maps.LatLng(31.8790761,54.339135),
zoom:5,
mapTypeId: "ParsijooMap",
mapTypeControl: false,
streetViewControl: false
});
//Define Parsijoo map type pointing at the ParsijooMap tile server
map.mapTypes.set("ParsijooMap", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
// "Wrap" x (logitude) at 180th meridian properly
// NB: Don't touch coord.x because coord param is by reference, and changing its x property breakes something in Google's lib
var tilesPerGlobe = 1 << zoom;
var x = coord.x % tilesPerGlobe;
if (x < 0) {
x = tilesPerGlobe+x;
}
// Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll
return "https://developers.parsijoo.ir/web-service/v1/map/?type=tile"+"&" +"x=" + x + "&" +"y=" + coord.y + "&" +"z=" + zoom +"&" + "apikey=b79aa829a62541e1897c1fcc2807a177";
},
tileSize: new google.maps.Size(256, 256),
name: "ParsijooMap",
maxZoom: 18
}));
</script>
<script type="text/javascript">
Object.defineProperty(HTMLScriptElement.prototype, "__src__", Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype, "src"));
Object.defineProperty(HTMLScriptElement.prototype, "src", {
configurable: true,
enumerable: true,
get() {
return this.__src__;
},
set(new_src) {
if (!new_src || !(new_src.startsWith("https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate") ||
new_src.startsWith("https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent")))
this.__src__ = new_src;
}
});
</script>
</body>
</html>
اضافه کردن مارکر
برای اضافه کردن مارکر کافی است کد زیر را نیز در انتهای script مربوط به بارگذاری نقشه قرار دهیم (اسکریپت اول):
var marker = new google.maps.Marker({ position: {lat: 31.8790761, lng: 54.339135}, map: map, title: 'شهر یزد' });توجه: {position: {lat: 31.8790761, lng: 54.339135 => در این بخش مختصات محل مارکر وارد می شود.
