Google Map Overlayer

Go straight to the Google Map Custom Overlayer here.

This is a facility to overlay an image or a picture onto a Google Map. Basically you can place the image wherever you like on the map, and through the magic of google maps it will zoom in and out, or pan around as you zoom or pan the map. You can also vary the opacity (or transparency) of the overlay so you can see through to the Google Map underneath.

This facility is particularly useful for overlaying a picture of a map you have onto a Google Map. It isn’t perfect, and I will mention a couple of shortcomings in the instructions below, but hopefully you will find it useful and if you don’t like it you can always ask for your money back. :)

Please leave any thoughts and comments below.

Instructions

  1. Start with the URL of the image you want to display on the map. eg “http://cleveret.net/stuff/lmcourse.jpg” – This is a map of the London Marathon course (which I borrowed off a HuffPost article just to use as an example). You will need to have your image somewhere online to start with as you cannot upload it to this website. If your image is not online already I would recommend uploading it to an image sharing website such as flickr or picasa. You can edit your image to be transparent to start with (before you upload it) if you like, but the page will also allow you to adjust the transparency.
  2. Enter the URL of the image into the text field as required.
  3. With the value in the “Click to place overlay” dropdown set to “centre”, click somewhere on the map. Your image should magically appear on the map. It will be about 500m across, so you might need to be zoomed in a bit to see it. Obviously you’ll probably want to pan to the correct location for your overlay.
  4. Once you have your overlay on the map, switch the “Click to place overlay” dropdown to “south-west corner” or “north-east corner” variously to scale and locate the overlay more accurately. I would suggest using the opacity setting and the toggle button to get this right. Also, feel free to switch between the map and satellite views as is appropriate. This bit can be a little tricky to get right, but that’s up to you! One day I might update the page with a handy drag-and-drop, and toggle-button interface (perhaps borrowing this code), but not today.
  5. When you’re happy with your map and overlay, you can “save” it by getting taking a record of the link provided in the right hand corner – right click and “copy link location” (or similar), then paste it into notepad or Word or a bookmark or whatever. Of course you can share the link with friends, and if you just want to send a less complicated view of the overlay you can share the read-only link.

link to overlay example
link to read-only overlay example

The opacity doesn’t always load correctly when you use the links. This is a quirk in Google Maps, and I don’t have time to sort it. Again the user can change it.

The links are a bit on the long side, so you may well choose to use a link shortening service, but I’ll leave that up to you.

4 comments

No ping yet

  1. Mike Steele says:

    Hi Tim,

    Thank you for sharing your Custom Overlayer. It looks as though it should do exactly want I want to achieve. I’m trying to overlay a scanned map of Scottish parishes https://flic.kr/p/PCSxAf onto a Google map. I get the image box to display in Overlayer and have been able to adjust the size and location but, unfortunately, can’t get the image to display. Could you possibly suggest what I might be doing wrong?

    Kind regards
    Mike

  2. Mike Steele says:

    Hi Tim,

    FYI, I succeeded in displaying the overlay image by using the picture https:// ******.jpg address from the Flickr ‘embed’ code rather than the Flickr ‘share’ address.

    Works great! Thank you.

    Mike

  3. Mike Steele says:

    Hi Tim,

    Sorry to trouble you again. Is there any way of overlaying my created layer https://c5.staticflickr.com/6/5333/31267039052_0d1dc2a642_z.jpg onto my own Google map https://drive.google.com/open?id=1zHgiyJIWQ6MeO20bUecPJYvz7II&usp=sharing ?

    Kind regards

    Mike

    1. admin says:

      Hi Mike,

      Sorry, very late reply. I haven’t been getting updates from this site for some reason.

      I’m glad you’ve had some use out of the tool.

      The overlay works using the Google Maps javascript API. I’m afraid I don’t know of any way to do this using Google’s “My Maps”. You could just use an iframe to my site if you wanted, using the read-only version of the map.

      Tim

Leave a Reply to admin Cancel reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>