Convert Google Maps to image and save in folder using JavaScript in Google Maps API V3 in ASP.Net

Hi Codemat,

You can save the image in local folder at server side by doing bit workaround. What you need to do is take a hidden field and assign the staticImageUrl to it and access it in code behind and download the file in byte array using DownloadData method of WebClient class and save it in local folder using File.WriteAllBytes method by passing the Url parameter of the folder where you want to save the image with image name.

I have created a sample which full fill your requirement you need to modify the code according to your need.

HTML

<div>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCI2rrQ6FeYu6JvfehofKYLLKxkDxem78o"></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;
            }

            //Save the Image Url of Google Map.
            document.getElementById("hfImageUrl").value = staticMapUrl;
        }
    </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>
                <asp:HiddenField ID="hfImageUrl" runat="server" />
            </td>
        </tr>
    </table>
    <br />
    <asp:Button Text="Save Image" OnClick="Save" OnClientClick="Export()" runat="server" />
    <br />
    <br />
    <asp:Image ID="imgServer" runat="server" />
</div>

C#

protected void Save(object sender, EventArgs e)
{
    byte[] data;
    WebClient webClient = new WebClient();
    data = webClient.DownloadData(hfImageUrl.Value);
    File.WriteAllBytes(Server.MapPath("~/staticImages/staticImage.jpg"), data);
    imgServer.ImageUrl = "~/staticImages/staticImage.jpg";
    imgServer.AlternateText = "~/staticImages/staticImage.jpg";
}

VB.Net

Protected Sub Save(sender As Object, e As EventArgs)
	Dim data As Byte()
	Dim webClient As New WebClient()
	data = webClient.DownloadData(hfImageUrl.Value)
	File.WriteAllBytes(Server.MapPath("~/staticImages/staticImage.jpg"), data)
	imgServer.ImageUrl = "~/staticImages/staticImage.jpg"
	imgServer.AlternateText = "~/staticImages/staticImage.jpg"
End Sub

ScreenShot