کار با api گوگل مپ و json در لاراول

[aliireza]

با سلام و عید همگی پیشاپیش مبارک
من سوالی که داشتم یا مشکلی که داشتم اینه که من میخوام با api گوگل مپ کار کنم (پلاگ‌این goMaps) و اطلاعات رو از db بگیرم و به صفحه اول بفرستم و موقعیت هر مکان رو روی نقشه نشون بدم. (یعنی مثلا ۱۰ تا مکانه و ۱۰ تا پین رو نقشه زده بشه)
مشکل وقتی پیش میاد که من میخوام این اطلاعات رو به jquery بفرستم و اون رو تو تابع موردنظر قراربدم تا با اطلاعاتی که از db گرفتم، موقعیت هر مکان رو مشخص کنم.
نمیدونم چطوری این کارو کنم. یعنی اطلاعات رو چطوری به jquery بفرستم. باید از ajax استفاده کنم و اطلاعات رو دریافت کنم؟ یا اینکه از طریق تابع getJson این کارو انجام بدم؟ در لاراول اطلاعات رو به صورت معمول بفرستم یا از Response::json استفاده کنم؟
کلا یکمی گیج شدم، ممنون میشم راهنمایی کنید :)

[rezakho]

سلام

موارد زیر رو مشخص کن تا بتونیم کمک کنیم
1- داده هایی که api گوگل مپ میپذیره با چه فرمتی هست، نمونه باشه بهتر
2- داده هایی که در بانک ذخیره داری به چه فرمتی هست
3- میخوای ajax ای داده ها رو نمایش بدی، یا اینکه داده ها همراه با ساخته شدن نقشه نمایش داده بشند

[aliireza]

سلام

موارد زیر رو مشخص کن تا بتونیم کمک کنیم
1- داده هایی که api گوگل مپ میپذیره با چه فرمتی هست، نمونه باشه بهتر
2- داده هایی که در بانک ذخیره داری به چه فرمتی هست
3- میخوای ajax ای داده ها رو نمایش بدی، یا اینکه داده ها همراه با ساخته شدن نقشه نمایش داده بشند

طول و عرض جغرافیایی هر مکان در db در فیلدهای float ذخیره میشه. و موقع لود صفحه اول از جدول کشیده میشه و همه اماکن در نقشه به صورت پین شده نشون داده میشن.
ای جکس بودن یا نبودنش فکر نمیکنم مهم باشه. هرکدوم بهتر باشه.

[rezakho]

متد ساختن نقطه در گوگل مپ این هست

new google.maps.LatLng(lat, lon);

شما باید داده ها رو بکشید بیرون، تبدیل به json کنید، در اسکریپت js چاپ کنید
بعد با for جاوااسکریپت json مورد نظر رو پیمایش کنید و هر بار نقطه مورد نظر با داده های مورد نظر رو بسازید و به نقشه اضافه کنید
راه های دیگه ای هم خودتون میتونید مثل همین پیاده سازی کنید
البته من فیلدهای جدولتون رو lat و lon در نظر گرفتم

<script>



    var points = {{ Point::all()->toJson() }};

    var myLatlng = new google.maps.LatLng(40.779502, -73.967857);

    var myOptions = {

        zoom: 12,

        center: myLatlng,

        mapTypeId: google.maps.MapTypeId.ROADMAP

    }

    map = new google.maps.Map(document.getElementById("map-div"), myOptions);



    for(i in points){

        location = new google.maps.LatLng(points[i].lat, points[i].lon);

        marker = new google.maps.Marker({

            position: location,

            map: map

        });

    }



</script>

[aliireza]

متد ساختن نقطه در گوگل مپ این هست

new google.maps.LatLng(lat, lon);

شما باید داده ها رو بکشید بیرون، تبدیل به json کنید، در اسکریپت js چاپ کنید
بعد با for جاوااسکریپت json مورد نظر رو پیمایش کنید و هر بار نقطه مورد نظر با داده های مورد نظر رو بسازید و به نقشه اضافه کنید
راه های دیگه ای هم خودتون میتونید مثل همین پیاده سازی کنید
البته من فیلدهای جدولتون رو lat و lon در نظر گرفتم

<script>



    var points = {{ Point::all()->toJson() }};

    var myLatlng = new google.maps.LatLng(40.779502, -73.967857);

    var myOptions = {

        zoom: 12,

        center: myLatlng,

        mapTypeId: google.maps.MapTypeId.ROADMAP

    }

    map = new google.maps.Map(document.getElementById("map-div"), myOptions);



    for(i in points){

        location = new google.maps.LatLng(points[i].lat, points[i].lon);

        marker = new google.maps.Marker({

            position: location,

            map: map

        });

    }



</script>

ممنون خیلی لطف کردید. ولی شما اومدی نحوه کار با نقشه گوگل رو گفتی که مشکل من اصلا این قسمتش نیست.
مشکل من نحوه ارسال اطلاعات از کنترلر به فایل js و دریافت اون هست

[rezakho]

به این دقت نکردی؟ گفتم دیگه
{{ Point::all()->toJson() }}

[aliireza]

به این دقت نکردی؟ گفتم دیگه
{{ Point::all()->toJson() }}

معذرت میخوام دقت نکردم.

[afee1990]

البته این خطو

var points = {{ Point::all()->toJson() }};

باید اینطوری

var points = "{{ Point::all()->toJson() }}";

بنویسی تا با خطا مواجه نشی

[rezakho]

البته این خطو

var points = {{ Point::all()->toJson() }};

باید اینطوری

var points = "{{ Point::all()->toJson() }}";

بنویسی تا با خطا مواجه نشی

خروجی این تابع جیسون هست که ابتدا با آرایه محیط میشه
ضمن اینکه قراره نقاط پیمایش بشند با حلقه
شما اومدی تبدیلش کردی به رشته!
خواهشن کمی دقت کنید توی کدها