In this article I will explain with an example, how to take Screenshot (Snapshot) Google Maps to Image using Google Maps API V3.
Google Maps API V3 provides Static Maps API to take Screenshot (Snapshot) Google Maps to Image.
 
 
Take Screenshot (Snapshot) of Google Maps using JavaScript
The following code snippet consists of an array of markers of different geographic address locations. Each marker in the array contains title, latitude, longitude and description of the location.
Inside the window.onload event handler, the LoadMap function is executed.
A loop is executed over the array of markers and one by one each marker is populated on the Google Map.
Below the Google Map, an HTML Button with a JavaScript Click event handler is placed. When the Button is clicked, the Google Map properties such as Center, Size, Zoom and MapType are fetched from the Google Maps mapOptions object and are appended to the Google Maps API V3 Static Maps API URL.
Then a loop is executed over the markers and their geographic address location details i.e. Latitude and Longitude values are appended to the Google Maps API V3 Static Maps API URL.
Finally the URL is set as source to an HTML IMG element which displays the Image of the Google Map.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API_Key></script>
<script type="text/javascript">
    var markers = [
    {
        "title": 'Aksa Beach',
        "lat": '19.1759668',
        "lng": '72.79504659999998',
        "description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'
    },
    {
        "title": 'Juhu Beach',
        "lat": '19.0883595',
        "lng": '72.82652380000002',
        "description": 'Juhu Beach is one of favourite tourist attractions situated in Mumbai.'
    },
    {
        "title": 'Girgaum Beach',
        "lat": '18.9542149',
        "lng": '72.81203529999993',
        "description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.'
    },
    {
        "title": 'Jijamata Udyan',
        "lat": '18.979006',
        "lng": '72.83388300000001',
        "description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.'
    },
    {
        "title": 'Sanjay Gandhi National Park',
        "lat": '19.2147067',
        "lng": '72.91062020000004',
        "description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.'
    }
    ];
    window.onload = function () {
        LoadMap();
    }
    var map, mapOptions;
    function LoadMap() {
        mapOptions = {
            center: new google.maps.LatLng(19.0883595, 72.82652380000002),
            zoom: 10,
            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.lat() + "," + mapOptions.center.lng();
 
        //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="Export" onclick="Export()" />
 
 
Screenshot
Take Screenshot (Snapshot) of Google Maps using JavaScript
 
 
Demo
View Demo
 
 
Downloads
Download Code