۳۰-تير-۱۳۹۲, ۱۰:۲۹:۰۷
شاید برای شما هم پیش اومده باشه که بخواهید از گوگل مپ برای دادن کرکی و ادرس تو سایتتون استفاده کنید
![[تصویر: Screenshot.png]](http://blog.softdare.com/wp-content/uploads/2011/03/Screenshot.png)
خب برای این کار باید از api گوگل که در اختیار ما قرار میده استفاده کنیمGoogle Map API مجموعه ابزارهایی را برای کار کردن و استفاده کردن از قابلیت های نقشه های گوگل فراهم می کند که به صورت یک فایل جاوا اسکریپت میباشد که باید به صفحه خود اضافه کنیم.
خب حالا باید مکان مورد نظر برای نمایش نقشه را فراهم کنیم یک div با ایدی و طول و عرض مورد نظر
خب حالا تابع جاوا اسکریپت خودمونو برای لود نقشه مینویسیم
خب حالا ما باید تغییرات لازم خودمون رو در این کد اعمال کنیم به اولین چیزی که نیاز داریم مختصات مکانی خودمون هست برای این کار با استفاده از سایت
سایت
رفته و ادرس مختصات خودتونو به دست بیارین
![[تصویر: map2.png]](http://aparnet.ir/wp-content/uploads/2013/04/map2.png)
و در قسمت google.maps.LatLng قرار دهید
قسمت قرمر دوم هم اندازه زوم نقشه هست که میتونین به دلخواه خودتون تغییر بدین[/code]
قسمت قرمز سوم به جای "خونه ما اینجاس" میتونین متنی رو که میخواهید بالای اون موقعیت مکانی نشون داده بشه رو بزنین
و قسمت قرمز چهارم هم hint اون موقعیت مکانی هست که با رفتن موس روی اون قسمت نشون داده میشه
![[تصویر: map.png]](http://aparnet.ir/wp-content/uploads/2013/04/map.png)
خب برای این کار باید از api گوگل که در اختیار ما قرار میده استفاده کنیمGoogle Map API مجموعه ابزارهایی را برای کار کردن و استفاده کردن از قابلیت های نقشه های گوگل فراهم می کند که به صورت یک فایل جاوا اسکریپت میباشد که باید به صفحه خود اضافه کنیم.
کد:
<script type="text/javascirpt" src="http://maps.google.com/maps/api/js?sensor=false"></script>خب حالا باید مکان مورد نظر برای نمایش نقشه را فراهم کنیم یک div با ایدی و طول و عرض مورد نظر
کد:
<div id="myMap" style="width:300px; height:300px"> </div>خب حالا تابع جاوا اسکریپت خودمونو برای لود نقشه مینویسیم
کد:
<script type="text/javascirpt">
function initialize() {
var myLatlng = new [color=#FF0000]google.maps.LatLng(36.28695466492734, 59.615657329559326);[/color]
var mapOptions = {
zoom: [color=#FF0000]15[/color],
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<div style="direction: rtl; text-align: right;font-family: Tahoma;">' +
'<h4>[color=#FF0000]خونه ما اینجاس[/color]</h4>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: '[color=#FF0000]lord_viper[/color]'
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
</script>خب حالا ما باید تغییرات لازم خودمون رو در این کد اعمال کنیم به اولین چیزی که نیاز داریم مختصات مکانی خودمون هست برای این کار با استفاده از سایت
سایت
رفته و ادرس مختصات خودتونو به دست بیارین
و در قسمت google.maps.LatLng قرار دهید
قسمت قرمر دوم هم اندازه زوم نقشه هست که میتونین به دلخواه خودتون تغییر بدین[/code]
قسمت قرمز سوم به جای "خونه ما اینجاس" میتونین متنی رو که میخواهید بالای اون موقعیت مکانی نشون داده بشه رو بزنین
و قسمت قرمز چهارم هم hint اون موقعیت مکانی هست که با رفتن موس روی اون قسمت نشون داده میشه
