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";

  3. I found your this post while searching for some related information on blog search...Its a good post..keep posting and update the information. recover money lost to binary options

  4. Thanks for a wonderful share. Your article has proved your hard work and experience you have got in this field. Brilliant .i love it reading. what county am i in now

  5. Easily, the article is actually the best topic on this registry related issue. I fit in with your conclusions and will eagerly look forward to your next updates. How to make success with affiliate marketing

  6. Great post, and great website. Thanks for the information! sinais iq option