We've used this script (or something very like it) for things like real estate listings. Each page gets a map, and the content manager just updates the address and the map re-centers on the address automatically.
First of all, we start off with some basic MagicEdit regions with plain text editing:
<span id="street"> <magicedit me_plain me_name="street">1600 Pennsylvania Ave NW</magicedit> </span><br /> <span id="cityStateZip"> <magicedit me_plain me_name="cityStateZip">Washington, DC 20500 </magicedit> </span> <div style="height:300px; width:400px" id="map_canvas"></div>
We're wrapping the editable address regions with
head of your page:
Make sure the path is correct to the location of the "me_map.js" file.
Finally, we need to call the map initialization function when the page loads. Update the
body tag of your site to match this:
If you are using jQuery and want to avoid putting scripting in the code, just call
initializeMap() inside your
Now when you log into the site you will see a couple of edit buttons by the address, as well as a map that should be centered on the address entered (the White House, in this case).
Now I can click on the little edit buttons and update the address! Here is what I get after entering Apple's address in Cupertino, then logging out. Sure enough, the map has updated its location accordingly.
So that's all you need to do to add a dynamically updatable map to your MagicEdit site.