Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][JavaScript]3 mapy Google na jednej stronie.
Forum PHP.pl > Forum > Przedszkole
cykcykacz
15.02.2010, 17:35:52
Witam, jak można umieścić 3 mapy Google na jednej stronie. Umiem umieścić jedną mapę ale 3 to jak na mój poziom wiedzy z Javascript za dużo aarambo.gif . Kombinowałem ale mi nie wyszło. Kod java script:
CODE

var geodecoder = null;
var map = null;
window.onload = load;

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
geocoder = new GClientGeocoder();
showAddress("Kaliska 17, Ostrów Wielkopolski, PL");
}
}

function showAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " nie zostal odnaleziony");
} else {
map.setCenter(point, 15);
var marker = new GMarker(point);
map.addOverlay(marker);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
}
}
);
}

Kod HTML:
Kod
<script src="http://maps.google.com/maps?file=api&v=2&key=XXXXXX"
   type="text/javascript"></script>
<script src="kod.js"type="text/javascript">
</script>
<body    style="font-family: Arial;border: 0 none;">
<div window.onload="load" onunload="GUnload()" id="map" style="width: 500px; height:300px">
</div>
<div window.onload="load" onunload="GUnload()" id="map2" style="width: 500px; height:300px">
</div>
</body>

Proszę o receptę jak dodać drugą mapę do div#id2?
athei
15.02.2010, 19:26:53
http://javascript.about.com/library/blgmap09.htm
cykcykacz
15.02.2010, 22:13:30
No tak byłem na tej stronie tylko ja mam skrypt nie z wprowadzonymi współrzędnymi geograficznymi tylko słownie. Więc nadal nie wiem jak to zrobić aarambo.gif .
athei
15.02.2010, 22:32:26
No dobra, ale w czym to przeszkadza?
Zrób sobie drugą mapę
Kod
var map2 = null;
map2 = new GMap2(document.getElementById("map2"));

Zrób drugą funkcję z pokazywaniem adresu no i koniec.
cykcykacz
15.02.2010, 23:14:59
Kod JS:
CODE

var geodecoder = null;
var map = null;
var map2 = null;
window.onload = load;

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
geocoder = new GClientGeocoder();
showAddress("Kaliska 17, Ostrów Wielkopolski, PL");
}
}

function load() {
if (GBrowserIsCompatible()) {
map2 = new GMap2(document.getElementById("map2"));
geocoder = new GClientGeocoder();
showAddress("Poznańska 17, Ostrów Wielkopolski, PL");
}
}

function showAddress(address) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " nie zostal odnaleziony");
} else {
map.setCenter(point, 15);
var marker = new GMarker(point);
map.addOverlay(marker);
map.openInfoWindow(map.getCenter(),
document.createTextNode("Hello, world"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
}
}
);
}

Kod HTML:
Kod
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAAWA3sYlYrszgur13HJ_iiBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRGJAtkXZfo
9ufQke_OaZQkKZ0n7g"
   type="text/javascript"></script>
<script src="kod.js"type="text/javascript">
</script>
<body    style="font-family: Arial;border: 0 none;">
<div window.onload="load" onunload="GUnload()" id="map" style="width: 500px; height:300px">
</div>
<div window.onload="load" onunload="GUnload()" id="map2" style="width: 500px; height:300px">
</div>
</body>

Jak zrobię to w ten sposób nie działa? Nigdy się nie uczyłem JS. Możesz mnie skorygować?
mls
16.02.2010, 10:23:39 
[JAVASCRIPT] pobierz, plaintext 
  1. var geodecoder = null;
  2. var map1 = null;
  3. var map2 = null;
  4.  
  5. function load() {
  6. 	if (GBrowserIsCompatible()) {
  7. 		map1 = new GMap2(document.getElementById("map1"));
  8. 		map2 = new GMap2(document.getElementById("map2"));
  9. 		geocoder = new GClientGeocoder();
  10.  
  11. 		showAddress(map1, "Kaliska 17, Ostrów Wielkopolski, PL");
  12. 		showAddress(map2, "Poznańska 17, Ostrów Wielkopolski, PL");
  13. 	}
  14. }
  15.  
  16. function showAddress(map, address) {
  17. 	geocoder.getLatLng(
  18. 		address,
  19. 		function(point) {
  20. 			if (!point) {
  21. 				alert(address + " nie zostal odnaleziony");
  22. 			} else {
  23. 				map.setCenter(point, 15);
  24. 				var marker = new GMarker(point);
  25. 				map.addOverlay(marker);
  26. 				map.openInfoWindow(map.getCenter(),
  27. 				document.createTextNode("Hello, world"));
  28. 				map.addControl(new GSmallMapControl());
  29. 				map.addControl(new GMapTypeControl());
  30. 			}
  31. 		}
  32. 	);
  33. }
[JAVASCRIPT] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAAWA3sYlYrszgur13HJ_iiBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRGJAtkXZfo9ufQ
    ke_OaZQkKZ0n7g"     type="text/javascript"></script>
  2. <script src="kod.js" type="text/javascript"></script>
  3. <body onload="load()" onunload="GUnload()" style="font-family: Arial; border: 0 none;">
  4. <div id="map1" style="width: 500px; height: 300px"></div>
  5. <div id="map2" style="width: 500px; height: 300px"></div>
  6. </body>
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.