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

قطعه کد زیر شامل یک آرایه ای از نشانگرهای آدرس مکان جغرافیایی مختلف می باشد. هر نشانگر (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()" />

خروجی: