تبدیل Google Maps به تصویر با استفاده از Google Maps API

در این پست نشان خواهیم داد که چگونه Google Maps را با استفاده از Google Maps API V3 به عکس تبدیل یا ذخیره کنیم. Google Maps API V3 d یک Static Maps API را برای تبدیل Google Maps به عکس فراهم می کند.

تبدیل Google Maps به تصویر با استفاده از Google Maps API

قطعه کد زیر شامل یک آرایه ای از نشانگرهای آدرس مکان جغرافیایی مختلف می باشد. هر نشانگر (marker) در آرایه شامل عنوان (title)، عرض جغرافیایی (latitude)، طول جغرافیایی (longitude) و توضیحات (description) مکان می باشد.

درون پنجره، رویداد onload و تابع LoadMap اجرا می شوند. یک حلقه بر روی آرایه نشانگرها اجرا می شود و یک به یک  هر نشانگر، روی Google Map پر می شود.

در زیر نقشه google، یک دکمه HTML با یک رویداد کلیک JavaScript قرار دارد. وقتی روی دکمه کلیک شد، خصوصیات Google Map، مانند اندازه، زوم، مرکز و نوع نقشه از شی mapOption مرتبط با GoogleMap واکشی شده و به Static Maps API URL اضافه می شود.

سپس یک حلقه بر روی نشانگرها اجرا می شود و مقدار مکان آدرس جغرافیایی و طول و عرض جغرافیایی آنها نیز به Static Maps API URL  اضافه می شود.

در نهایت URL به عنوان منبع در یک المنت HTML IMG قرار می گیرد که عکس GoogleMap را نشان می دهد.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var markers = [
    {
        "title": 'برنامه نویسان',
        "lat": '35.7181491',
        "lng": '51.4402257',
        "description": 'مرجع تخصصی برنامه نویسان'
    }
    
    ];
        window.onload = function () {
            LoadMap();
        }
        var map, mapOptions;
        function LoadMap() {
            mapOptions = {
                center: new google.maps.LatLng(35.7181491,51.4402257),
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

            for (var i = 0; i < markers.length; i++) {
                var data = markers[i];
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
            }
        };
        function Export() {
            //URL of Google Static Maps.
            var staticMapUrl = "https://maps.googleapis.com/maps/api/staticmap";

            //Set the Google Map Center.
            staticMapUrl += "?center=" + mapOptions.center.G + "," + mapOptions.center.K;

            //Set the Google Map Size.
            staticMapUrl += "&size=220x350";

            //Set the Google Map Zoom.
            staticMapUrl += "&zoom=" + mapOptions.zoom;

            //Set the Google Map Type.
            staticMapUrl += "&maptype=" + mapOptions.mapTypeId;

            //Loop and add Markers.
            for (var i = 0; i < markers.length; i++) {
                staticMapUrl += "&markers=color:red|" + markers[i].lat + "," + markers[i].lng;
            }

            //Display the Image of Google Map.
            var imgMap = document.getElementById("imgMap");
            imgMap.src = staticMapUrl;
            imgMap.style.display = "block";
        }
    </script>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div id="dvMap" style="width: 220px; height: 350px">
                </div>
            </td>
            <td>
                &nbsp; &nbsp;
            </td>
            <td>
                <img id="imgMap" alt="" style="display: none" />
            </td>
        </tr>
    </table>
    <br />
    <input type="button" id="btnExport" value="عکس نقشه" onclick="Export()" />

 

خروجی:

 

فایل های ضمیمه