CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3
VDimitrov
VDimitrov

Reputation: 19

Adding a custom logo on top of Google Maps - V3 API

I'm trying to add a PNG image of a logo, that doesn't move or pan with the map, in the top center of the map. What's the best way to do that?

I'm using the V3 of the Google Maps API. I'm not too good with JavaScript but I managed to add a legend in the bottom left corner that stays in place using the Control Position. Can that be used to place a static image on the top center?

Thanks for any help!

Upvotes: 1

Views: 5809

Answers (1)

grgdne
grgdne

Reputation: 239

You don't need JS, just some CSS. Here's an example:

<div class="map-container">
    <div id="map" class="map"></div>
    <img src="http://lorempixel.com/100/40/">
</div>

.map-container {
    position: relative;
}

img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50px;
}

Complete example here: http://jsfiddle.net/cyh342a4/

Upvotes: 2

Related Questions