Kod
<!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" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Simple Google map</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6bgNPXkAosfTjyzkgZY4MhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTqt1uKwNHv
O3FH913433lf2Is_w"
type="text/javascript"></script>
<style>
.blink { text-decoration: blink; font-style: italic; }
table{ float: left; margin-right: 5px; }
div{ float: left; }
</style>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
//<![CDATA[
// Google Map Maker script v.1.1
// (c) 2006 Richard Stephenson http://www.donkeymagic.co.uk
// Email: donkeymagic@gmail.com
// http://mapmaker.donkeymagic.co.uk
var map;
var icon0;
var newpoints = new Array();
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(loadMap);
addLoadEvent(addPoints);
function loadMap() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 53.5664141528, -2.57080078125), 5);
map.setMapType(G_MAP_TYPE);
icon0 = new GIcon();
icon0.image = "http://www.google.com/mapfiles/marker.png";
icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon0.iconSize = new GSize(20, 34);
icon0.shadowSize = new GSize(37, 34);
icon0.iconAnchor = new GPoint(9, 34);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(18, 25);
}
function addPoints() {
newpoints[0] = new Array(55.00000000000000, -1.93359375, icon0, '', 'Twoja pozycja');
for(var i = 0; i < newpoints.length; i++) {
var point = new GPoint(newpoints[i][1],newpoints[i][0]);
var popuphtml = newpoints[i][4];
var marker = createMarker(point,newpoints[i][2],popuphtml);
map.addOverlay(marker);
}
}
function createMarker(point, icon, popuphtml) {
var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(popuphtml);
});
return marker;
}
//]]>
</script>
<style type="text/css">
div#popup {
background:#EFEFEF;
border:1px solid #999999;
margin:0px;
padding:7px;
width:270px;
}
</style>
</head>
<body onload='process()'>
<table border="1">
<tr><td><b>MAPS RAW 1</b></td><td id="maps1"><p class="blink">[BRAK DANYCH]</p></td></tr>
<tr><td><b>MAPS RAW 2</b></td><td id="maps2"><p class="blink">[BRAK DANYCH]</p></td></tr>
</table>
<div id="map" style="width:500px;height:350px"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Simple Google map</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA6bgNPXkAosfTjyzkgZY4MhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTqt1uKwNHv
O3FH913433lf2Is_w"
type="text/javascript"></script>
<style>
.blink { text-decoration: blink; font-style: italic; }
table{ float: left; margin-right: 5px; }
div{ float: left; }
</style>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
//<![CDATA[
// Google Map Maker script v.1.1
// (c) 2006 Richard Stephenson http://www.donkeymagic.co.uk
// Email: donkeymagic@gmail.com
// http://mapmaker.donkeymagic.co.uk
var map;
var icon0;
var newpoints = new Array();
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(loadMap);
addLoadEvent(addPoints);
function loadMap() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 53.5664141528, -2.57080078125), 5);
map.setMapType(G_MAP_TYPE);
icon0 = new GIcon();
icon0.image = "http://www.google.com/mapfiles/marker.png";
icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon0.iconSize = new GSize(20, 34);
icon0.shadowSize = new GSize(37, 34);
icon0.iconAnchor = new GPoint(9, 34);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(18, 25);
}
function addPoints() {
newpoints[0] = new Array(55.00000000000000, -1.93359375, icon0, '', 'Twoja pozycja');
for(var i = 0; i < newpoints.length; i++) {
var point = new GPoint(newpoints[i][1],newpoints[i][0]);
var popuphtml = newpoints[i][4];
var marker = createMarker(point,newpoints[i][2],popuphtml);
map.addOverlay(marker);
}
}
function createMarker(point, icon, popuphtml) {
var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(popuphtml);
});
return marker;
}
//]]>
</script>
<style type="text/css">
div#popup {
background:#EFEFEF;
border:1px solid #999999;
margin:0px;
padding:7px;
width:270px;
}
</style>
</head>
<body onload='process()'>
<table border="1">
<tr><td><b>MAPS RAW 1</b></td><td id="maps1"><p class="blink">[BRAK DANYCH]</p></td></tr>
<tr><td><b>MAPS RAW 2</b></td><td id="maps2"><p class="blink">[BRAK DANYCH]</p></td></tr>
</table>
<div id="map" style="width:500px;height:350px"></div>
</body>
</html>
Ajax uzupelnia pola w tabeli i chcaialbym aby po uzupelnieniu ronwniez marker na mapie zmienil swoja pozyccje. Czy ejst to mozliwe dynamicznie bez odswiezania ?
Jesli tak to jak podsunac do tego JS`a od gmaps nowe dane i zmusic go aby uaktualnil marker?
