implement custom overlay on a single point google maps

Question

I want to implement a div on a single (lat,lng) point with fixed width and height on google maps. There are examples to implement overlay within a bound and not on a single point. Has somebody implemented this ?

Answer 1

You can create an overlay on a single point by adding a custom marker to your point. Essentially, when you create the marker, you can define an icon that will replace the default Google API Marker icon:

    var img = 'http://placehold.it/96/ffffff'
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: img // replace google marker with icon
    });

Link to JSFiddle.

If you want an actual HTML div to overlay on Google Maps, you could convert the div into a canvas as shown in this tutorial