How to create a text overlay in Google Maps API v3 that does not pan? -


i'm using google maps api v3. create text overlay on map not move when map panned. best approach manipulate dom elements accessible mappanes object or best create custom control though not other display text?

the simplest way found worked me few lines of javascript added after created new map. so, after this:

map = new google.maps.map('mymapdivid', mapoptions); 

add this:

var mytitle = document.createelement('h1'); mytitle.style.color = 'white'; mytitle.innerhtml = 'hello world'; var mytextdiv = document.createelement('div'); mytextdiv.appendchild(mytitle);  map.controls[google.maps.controlposition.bottom_center].push(mytextdiv); 

you want style text nicer.

an alternative put div in html:

<div id="mytextdiv" style="color: white; position: absolute;">     <h1>hello world</h1> </div> 

and in javascript:

var mycontrol = document.getelementbyid('mytextdiv'); map.controls[google.maps.controlposition.top_center].push(mycontrol); 

note important difference: if use html route define div, must set position style absolute in html avoid rendering problems.


Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -