CODEWITHSUNDEEP
javascripthtmlgoogle-mapsgoogle-maps-api-3
Kedor
Kedor

Reputation: 1498

Google Maps Api V3 - Editable info windows

i wanted to ask if there is any way to make infowindows editable? So far i am using simply way to achieve that. When first time infowindow is created, it contains textarea. That lets me to write whatever i want, and then save it using ajax to database. The problem is, i need more functionality. When you go to "My maps" or "My places" in google.maps(dunno english translation) you can add marker there, and then info window pops up and it let you use HTML edit ... i would love to get that in my infowindows, or any other way, any other "editor".... anyone knows how to achieve that? Photo to "editor" in my maps

Photo is from -> http://maps.google.pl/ -> My Maps (available when logged in) -> Edit/Add map -> put a marker on the map. Source code is kinda... complicated ..

Upvotes: 0

Views: 1269

Answers (2)

Brian Nickel
Brian Nickel

Reputation: 27550

Google Maps uses the contentEditable attribute to make an editable HTML section. The below code creates an editable div with buttons to make the selection bold and italic. You would use innerHTML to get the resultant HTML.

<div id="mydiv" contenteditable="true">Edit Me</div>
<button onclick="document.execCommand('bold',null,false);">B</button>
<button onclick="document.execCommand('italic',null,false);">I</button>
<button onclick="alert(document.getElementById('mydiv').innerHTML)">Show HTML</button>

You can learn more on MDN.

Upvotes: 3

Stephen O&#39;Connor
Stephen O&#39;Connor

Reputation: 1475

You can set the content of your infowindow to be a DOM node. This means you can create your own interface inside the infowindow. 

infowindow.setContent(mynode);

Upvotes: 2

Related Questions