Hey Derek,
thank you for your quick response. You pointed out some code which was
only there in this attempt :) When I deleted it, nothing changed :(
If you take a look at the source code here: http://www.crowdmaps.org/maps/6#
I attached the current status as a file while I still try and increase
my skills on javascript.
Cheers,
Guido
Am 23.01.2012 11:57, schrieb Derek Fowler:> Hi Guido,
>
> In your script to add the markers remove the "var mapstraction;"
as that
> is redefining the map variable.
>
> Should work apart from that, provided you include the right JavaScript
> files.
>
> Derek
>
> On Jan 23, 2012 9:07 AM, "Guido Gallenkamp"
> <guido.gallenkamp at googlemail.com
> <mailto:guido.gallenkamp at googlemail.com>> wrote:
>
> Good morning,
>
> I am currently switching a project of mine from google maps to
> mapstraction. As I am not a javascript hero, I have some issues with
> placing markers inside another php file than I create the map.
>
> The code inside the "default template" looks like this:
> ### begin code ####
> <script type="text/javascript">
> var mapstraction;
> function initialize() {
> // initialise the map with your choice of API
> mapstraction = new
mxn.Mapstraction(''map_canvas'',''openlayers'');
>
> <?php if (isset($map)) { ?>
> mapstraction.setCenterAndZoom(new
> mxn.LatLonPoint(<?php echo
> $map[''Map''][''lat''] ?>, <?php
echo $map[''Map''][''lng''] ?>), <?php
echo
> $map[''Map''][''zoom_level''] ?>);
> <?php } else { ?>
> mapstraction.setCenterAndZoom(new
> mxn.LatLonPoint(51.255125,7.13613), 9);
> <?php } ?>
> mapstraction.addControls({
> pan: true,
> zoom: ''large'',
> map_type: true
> });
> var foo = function() { mapstraction.removeMarker(my_marker); };
> }
> </script>
> ### end ####
>
> The other part is the file that should get all the markes from the
> database. I placed a dummmy marker for now, but it doesnt show up:
>
> #### begin code ###
> <script type="text/javascript">
> var mapstraction;
> mapstraction.addMarker( new mxn.Marker( new
> mxn.LatLonPoint(51.255125,7.13613)));
> </script>
> #### end code ###
>
> I guess its just some badly written javascript of mine, but I
can''t
> figure out what it is. Any help would be fine!
>
> Thank you & have a nice week,
>
> Guido
>
> --
> Guido Gallenkamp
> +49 174 564 82 47 <tel:%2B49%20174%20564%2082%2047>
>
> bytethinker
> Luisenstra?e 87a
> D-42103 Wuppertal
> B?ro: +49 202 261 49 79 1 <tel:%2B49%20202%20261%2049%2079%201>
> Fax: +49 263 4444 <tel:%2B49%20263%204444>
>
> skype:guido.gallenkamp?chat
> http://twitter.com/gallenkamp
> _______________________________________________
> Mapstraction mailing list
> Mapstraction at lists.mapstraction.com
> <mailto:Mapstraction at lists.mapstraction.com>
>
http://lists.mapstraction.com/listinfo.cgi/mapstraction-mapstraction.com
>
>
>
> _______________________________________________
> Mapstraction mailing list
> Mapstraction at lists.mapstraction.com
> http://lists.mapstraction.com/listinfo.cgi/mapstraction-mapstraction.com
-------------- next part --------------
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Crowdmaps: Cronhills Lieblingspl?tze</title>
<link rel="stylesheet" type="text/css"
href="/css/framework.css" />
<!-- Javascripts -->
<script>
var SERVER_URL = "/";
</script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript"
src="/js/lib/jquery.form.js"></script><script
type="text/javascript"
src="/js/lib/jquery.livequery.js"></script>
<link rel="stylesheet" type="text/css"
href="/css/default.css" /><link rel="stylesheet"
type="text/css" href="/css/karte.css" /> <script
src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" charset="utf-8"
src="http://mapstraction.googlecode.com/svn/trunk/source/mxn.js?(openlayers)"></script>
<script type="text/javascript">
function initialize() {
// initialise the map with your choice of API
var mapstraction = new
mxn.Mapstraction(''map_canvas'',''openlayers'');
mapstraction.setCenterAndZoom(new mxn.LatLonPoint(51.255871,
7.14998500000002), 8);
mapstraction.addControls({
pan: true,
zoom: ''large'',
map_type: true
});
var foo = function() { mapstraction.removeMarker(my_marker); };
}
</script>
</head>
<body onload="initialize()">
<div id="header">
<div id="topnav" class="overlay">
<ul class="left">
<li>
<a href="#" onClick="addMarker();">Add
Marker</a> </li>
</ul>
<div>
<ul class="left">
<li><a href="/users/signup">Sign
Up</a></li>
<li><a href="/users/login">Login</a></li>
</ul>
</div>
<div class="categories rounded5"></div>
<div id="message">
</div>
</div> </div>
<div id="forms">
<script type="text/javascript"
src="/js/forms.js"></script><link
rel="stylesheet" type="text/css"
href="/css/forms.css" /><div id="add-map-form"
class="flying-form overlay" style="display:none;">
<form method="post" action="/maps/add"
accept-charset="utf-8"><div
style="display:none;"><input type="hidden"
name="_method" value="PUT" /></div>
<div class="input text required"><label
for="MapName">Name</label><input
name="data[Map][name]" type="text" value=""
maxlength="255" id="MapName" /></div>
<div class="input text required"><label
for="MapCategoryName">Default Category</label><input
name="data[Map][category_name]" type="text"
value="" id="MapCategoryName" /></div> <div
class="input text required"><label
for="MapZoomLevel">Zoom level (1,2,3..)</label><input
name="data[Map][zoom_level]" type="text" value=""
maxlength="4" id="MapZoomLevel" /></div> <div
class="input text"><label for="mapcenter">Map
center (etc. Berlin, Germany)</label><input
name="data[Map][center]" type="text"
id="mapcenter" value="" /></div>
<input type="hidden" name="data[Map][lat]"
value="0" id="maps-lat" /> <input
type="hidden" name="data[Map][lng]" value="0"
id="maps-lng" />
<input class="btn" type="submit"
value="Save"/>
<a
onclick="$(''#add-map-form'').hide();">Cancel</a>
</form></div>
<div id="add-marker-form" style="display:none;">
<form class="marker-form" method="post"
action="/markers/add" accept-charset="utf-8"><div
style="display:none;"><input type="hidden"
name="_method" value="POST" /></div>
<div class="input text required"><label
for="MarkerName">Name</label><input
name="data[Marker][name]" type="text"
maxlength="255" id="MarkerName" /></div> <input
type="hidden" name="data[Marker][map_id]"
value="6" id="MarkerMapId" />
<input type="hidden" name="data[Marker][lat]"
value="0" id="MarkerLat" /> <input
type="hidden" name="data[Marker][lng]" value="0"
id="MarkerLng" />
<div class="input text"><label
for="MarkerEmail">Email</label><input
name="data[Marker][email]" type="text"
id="MarkerEmail" /></div>
<div class="input select"><label
for="MarkerCategoryId">Category</label><select
name="data[Marker][category_id]" id="MarkerCategoryId">
<option value="9">Sch?ne Pl?tze</option>
<option value="11">G?rten</option>
</select></div>
<input class="btn" type="submit"
value="Add"/>
<a onclick="removeMarker();">Remove</a>
</form></div>
<div id="add-category-form" class="flying-form overlay"
style="display:none;">
<form class="category-form" method="post"
action="/categories/add" accept-charset="utf-8"><div
style="display:none;"><input type="hidden"
name="_method" value="POST" /></div>
<div class="input text required"><label
for="CategoryName">Name</label><input
name="data[Category][name]" type="text"
maxlength="255" id="CategoryName" /></div>
<input type="hidden" name="data[Category][map_id]"
value="6" id="CategoryMapId" />
<input class="btn" type="submit"
value="Save"/>
<a
onclick="$(''#add-category-form'').hide();">Cancel</a>
</form></div>
<div id="switch-map" class="flying-form overlay"
style="display:none;">
</div> </div>
<div id="content">
<div id="map_canvas"></div>
<div id="maptitle" class="overlay">
<h1>Cronhills Lieblingspl?tze</h1>
</div>
<div id="mapinfo" class="overlay">
Das hier ist die Mapinfo. Es ist also eine Karte hinterlegt.
</div>
<script type="text/javascript">
mapstraction.addMarker( new mxn.Marker( new
mxn.LatLonPoint(51.255125,7.13613)));
</script>
</div>
<p id="footer"></p>
</body>
</html>