Kod
<body onload='mapaStart()' onunload='GUnload()'>
<script type='text/javascript'>
<!--
var mapa;
var marker;
var ikona = new GIcon();
ikona.image = "http://maps.google.com/mapfiles/kml/pal2/icon10.png";
ikona.iconAnchor = new GPoint(16, 16);
ikona.shadow = "";
ikona.infoWindowAnchor = new GPoint(16,16);
ikona.iconSize = new GSize(32, 32);
function pobierzWartosc(obiektRadio)
{
if(!obiektRadio)
return null;
var ilosc = obiektRadio.length;
if(ilosc == undefined)
if(obiektRadio.checked)
return obiektRadio.value;
else
return null;
for(var i=0; i<ilosc; i++)
{
if(obiektRadio[i].checked)
{
return obiektRadio[i].value;
}
}
return null;
}
function mapaStart()
{
if(GBrowserIsCompatible())
{
mapa = new GMap2(document.getElementById("mapka"));
mapa.setCenter(new GLatLng(52.849385, 17.719477), 12, G_HYBRID_MAP);
mapa.addControl(new GLargeMapControl());
mapa.addControl(new GMapTypeControl());
marker = new GMarker(mapa.getCenter(),{icon: ikona, draggable: true});
marker.opis = 'bez opisu';
mapa.addOverlay(marker);
// zdarzenia dla markera
GEvent.addListener(marker,'drag',uaktualnijWspolrzedne);
GEvent.addListener(marker,'click',function()
{
marker.openInfoWindowHtml(marker.opis);
});
GEvent.trigger(marker,'drag');
uaktualnijDymek()
// zdarzenia dla mapy
GEvent.addListener(mapa,'click',function(o,p)
{
if(p)
{
marker.setPoint(p);
uaktualnijWspolrzedne();
}
});
}
}
function uaktualnijWspolrzedne()
{
var input_lat = document.getElementById('lat');
var input_lng = document.getElementById('lng');
var punkt = marker.getLatLng();
input_lat.value = punkt.lat();
input_lng.value = punkt.lng();
}
function uaktualnijIkone()
{
var url = pobierzWartosc(document.forms['formularz'].elements['ikona']);
marker.setImage(url);
uaktualnijDymek()
}
function uaktualnijDymek()
{
var url = pobierzWartosc(document.forms['formularz'].elements['ikona']);
var tytul = document.getElementById('nazwa').value;
var opis = document.getElementById('opis').value;
var html = '<img src="'+url+'" alt="" style="float: right; border: 0;" /><h3 class="marker">'+tytul+'</h3><p class="marker">'+opis+'</p>';
marker.opis = html;
if(mapa.getInfoWindow() && !mapa.getInfoWindow().isHidden())
GEvent.trigger(marker,'click');
}
-->
</script>
<div id="mapka" style="float: left; width: 400px; height: 400px; border: 1px solid black; background: gray;">
<!-- tu bÄdzie mapa -->
</div>
<form action="/02.php" method="post" id="formularz" style="display: block; width: 250px; margin-left: 420px;">
<fieldset><legend>współrzędne</legend>
<input type="text" class="disabled" readonly="readonly" id="lat" name="lat" /><br /><span class="opis">długość geograficzna</span><br /><br />
<input type="text" class="disabled" readonly="readonly" id="lng" name="lng" /><br /><span class="opis">szerokość geograficzna</span><br />
Aby wskazać miejsce kliknij na mapie lub przenieś marker.
</fieldset>
<fieldset><legend>dane alertu</legend>
<input onkeyup="uaktualnijDymek()" type="text" id="nazwa" name="nazwa" value="nazwa alertu" /><br /><span class="opis">nazwa alertu</span><br /><br />
<textarea onkeyup="uaktualnijDymek()" id="opis" name="opis">opis alertu</textarea><br /><span class="opis">opis alertu</span><br /><br />
<input onclick="uaktualnijIkone()" type="radio" name="ikona" id="ikona1" value="http://maps.google.com/mapfiles/kml/pal2/icon10.png" checked="checked" /><img style="border: 0;" alt="ikona1" src="http://maps.google.com/mapfiles/kml/pal2/icon10.png" />
<input onclick="uaktualnijIkone()" type="radio" name="ikona" id="ikona2" value="http://maps.google.com/mapfiles/kml/pal2/icon11.png" /><img style="border: 0;" alt="ikona2" src="http://maps.google.com/mapfiles/kml/pal2/icon11.png" />
<input onclick="uaktualnijIkone()" type="radio" name="ikona" id="ikona3" value="http://maps.google.com/mapfiles/kml/pal2/icon12.png"/><img style="border: 0;" alt="ikona3" src="http://maps.google.com/mapfiles/kml/pal2/icon12.png" /> <br />
<input onclick="uaktualnijIkone()" type="radio" name="ikona" id="ikona4" value="http://maps.google.com/mapfiles/kml/pal2/icon13.png"/><img style="border: 0;" alt="ikona4" src="http://maps.google.com/mapfiles/kml/pal2/icon13.png" />
<input onclick="uaktualnijIkone()" type="radio" name="ikona" id="ikona5"value="http://maps.google.com/mapfiles/kml/pal2/icon14.png"/><img style="border: 0;" alt="ikona5" src="http://maps.google.com/mapfiles/kml/pal2/icon14.png" /> <br />
<span class="opis">kategorie</span>
</fieldset>
<input type="submit" value="DODAJ MARKER!" />
</form>
<br style="clear: left" />
<p id="info">Mapa na której dodaje się markery.</p>
</body>
<script type='text/javascript'>
<!--
var mapa;
var marker;
var ikona = new GIcon();
ikona.image = "http://maps.google.com/mapfiles/kml/pal2/icon10.png";
ikona.iconAnchor = new GPoint(16, 16);
ikona.shadow = "";
ikona.infoWindowAnchor = new GPoint(16,16);
ikona.iconSize = new GSize(32, 32);
function pobierzWartosc(obiektRadio)
{
if(!obiektRadio)
return null;
var ilosc = obiektRadio.length;
if(ilosc == undefined)
if(obiektRadio.checked)
return obiektRadio.value;
else
return null;
for(var i=0; i<ilosc; i++)
{
if(obiektRadio[i].checked)
{
return obiektRadio[i].value;
}
}
return null;
}
function mapaStart()
{
if(GBrowserIsCompatible())
{
mapa = new GMap2(document.getElementById("mapka"));
mapa.setCenter(new GLatLng(52.849385, 17.719477), 12, G_HYBRID_MAP);
mapa.addControl(new GLargeMapControl());
mapa.addControl(new GMapTypeControl());
marker = new GMarker(mapa.getCenter(),{icon: ikona, draggable: true});
marker.opis = 'bez opisu';
mapa.addOverlay(marker);
// zdarzenia dla markera
GEvent.addListener(marker,'drag',uaktualnijWspolrzedne);
GEvent.addListener(marker,'click',function()
{
marker.openInfoWindowHtml(marker.opis);
});
GEvent.trigger(marker,'drag');
uaktualnijDymek()
// zdarzenia dla mapy
GEvent.addListener(mapa,'click',function(o,p)
{
if(p)
{
marker.setPoint(p);
uaktualnijWspolrzedne();
}
});
}
}
function uaktualnijWspolrzedne()
{
var input_lat = document.getElementById('lat');
var input_lng = document.getElementById('lng');
var punkt = marker.getLatLng();
input_lat.value = punkt.lat();
input_lng.value = punkt.lng();
}
function uaktualnijIkone()
{
var url = pobierzWartosc(document.forms['formularz'].elements['ikona']);
marker.setImage(url);
uaktualnijDymek()
}
function uaktualnijDymek()
{
var url = pobierzWartosc(document.forms['formularz'].elements['ikona']);
var tytul = document.getElementById('nazwa').value;
var opis = document.getElementById('opis').value;
var html = '<img src="'+url+'" alt="" style="float: right; border: 0;" /><h3 class="marker">'+tytul+'</h3><p class="marker">'+opis+'</p>';
marker.opis = html;
if(mapa.getInfoWindow() && !mapa.getInfoWindow().isHidden())
GEvent.trigger(marker,'click');
}
-->
</script>
<div id="mapka" style="float: left; width: 400px; height: 400px; border: 1px solid black; background: gray;">
<!-- tu bÄdzie mapa -->
</div>
<form action="/02.php" method="post" id="formularz" style="display: block; width: 250px; margin-left: 420px;">
<fieldset><legend>współrzędne</legend>
<input type="text" class="disabled" readonly="readonly" id="lat" name="lat" /><br /><span class="opis">długość geograficzna</span><br /><br />
<input type="text" class="disabled" readonly="readonly" id="lng" name="lng" /><br /><span class="opis">szerokość geograficzna</span><br />
Aby wskazać miejsce kliknij na mapie lub przenieś marker.
</fieldset>
<fieldset><legend>dane alertu</legend>
<input onkeyup="uaktualnijDymek()" type="text" id="nazwa" name="nazwa" value="nazwa alertu" /><br /><span class="opis">nazwa alertu</span><br /><br />
<textarea onkeyup="uaktualnijDymek()" id="opis" name="opis">opis alertu</textarea><br /><span class="opis">opis alertu</span><br /><br />
<input onclick="uaktualnijIkone()" type="radio" name="ikona" id="ikona1" value="http://maps.google.com/mapfiles/kml/pal2/icon10.png" checked="checked" /><img style="border: 0;" alt="ikona1" src="http://maps.google.com/mapfiles/kml/pal2/icon10.png" />
<input onclick="uaktualnijIkone()" type="radio" name="ikona" id="ikona2" value="http://maps.google.com/mapfiles/kml/pal2/icon11.png" /><img style="border: 0;" alt="ikona2" src="http://maps.google.com/mapfiles/kml/pal2/icon11.png" />
<input onclick="uaktualnijIkone()" type="radio" name="ikona" id="ikona3" value="http://maps.google.com/mapfiles/kml/pal2/icon12.png"/><img style="border: 0;" alt="ikona3" src="http://maps.google.com/mapfiles/kml/pal2/icon12.png" /> <br />
<input onclick="uaktualnijIkone()" type="radio" name="ikona" id="ikona4" value="http://maps.google.com/mapfiles/kml/pal2/icon13.png"/><img style="border: 0;" alt="ikona4" src="http://maps.google.com/mapfiles/kml/pal2/icon13.png" />
<input onclick="uaktualnijIkone()" type="radio" name="ikona" id="ikona5"value="http://maps.google.com/mapfiles/kml/pal2/icon14.png"/><img style="border: 0;" alt="ikona5" src="http://maps.google.com/mapfiles/kml/pal2/icon14.png" /> <br />
<span class="opis">kategorie</span>
</fieldset>
<input type="submit" value="DODAJ MARKER!" />
</form>
<br style="clear: left" />
<p id="info">Mapa na której dodaje się markery.</p>
</body>
Teraz chciałbym dołożyć do niego taki:
Kod
GMaps.geocode({
address: $('#address').val(),
callback: function(results, status){
if(status=='OK'){
var latlng = results[0].geometry.location;
map.setCenter(latlng.lat(), latlng.lng());
map.addMarker({
lat: latlng.lat(),
lng: latlng.lng()
});
}
}
});
address: $('#address').val(),
callback: function(results, status){
if(status=='OK'){
var latlng = results[0].geometry.location;
map.setCenter(latlng.lat(), latlng.lng());
map.addMarker({
lat: latlng.lat(),
lng: latlng.lng()
});
}
}
});
tu jego wykonywanie:
Kod
<div class="row">
<div class="span11">
<form method="post" id="geocoding_form">
<label for="address">Address:</label>
<div class="input">
<input type="text" id="address" name="address" />
<input type="submit" class="btn" value="Search" />
</div>
</form>
<div id="map"></div>
</div>
<div class="span11">
<form method="post" id="geocoding_form">
<label for="address">Address:</label>
<div class="input">
<input type="text" id="address" name="address" />
<input type="submit" class="btn" value="Search" />
</div>
</form>
<div id="map"></div>
</div>
Czy może mi ktoś pomóc połączyć te 2 skrypty? Tak aby ten geocode wstawić do tego pierwszego. Pozdrawiam