Saturday, 17 May 2014

Save google map as binary image

There are some situations we have to save google map as an image. It is always better to convert as a binary image and save to DB so that we can reuse very easily.

Here we are plotting the google map

 <div id="googlemap"></div>

Here we are displaying the converted binary image

 <div id="googlemapimage">
 <img id="googlemapbinary"/>


Let us check the code now

function convertasbinaryimage()
html2canvas(document.getElementById("googlemap"), {

useCORS: true,

onrendered: function(canvas) {
 var img = canvas.toDataURL("image/png"); 
 img = img.replace('data:image/png;base64,', '');
 var finalImageSrc = 'data:image/png;base64,' + img;
 $('#googlemapbinary').attr('src', finalImageSrc);                    
 return false;                    

What I have done is that, I used html2canvas plugin support and then converting to binary image .Now you can take this html or binary code and can save to DB

Don't forget to add html2canvas plugin


1. html2canvas

2. Google Map Api

Related Posts

1. Save high chart as binary image

2. Responsive high chart

3. Integration of CK-Editor to ui

4. Dynamic height for side bar

5. Auto complete using html5


  1. shower full code with demo i am new to it

  2. lol bro you got it thx you really help me but one question how can use the imege in the controller im using mvc4

    1. If you are using Angular js you can simply write
      bind-html = "binaryimage";