Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dwie mapy Google na jednej podstronie
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Frag
18.01.2015, 20:26:32
Witam, mam problem z mapkami Google, mianowicie chce dodać dwie Mapy Google na jednej podstronie, ale występuje błąd - klikając w znacznik na jednej mapie, przenosi na miejsce na drugiej mapie. Informacje na temat danego miejsca widać tylko na jednej mapie.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 	<title>Mapy</title>
  5.     <meta charset="utf-8">
  6. 	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  7. 	<script type="text/javascript" src="js/mapy_google.js"></script>
  8. 	</head>
  9. 	<body onload="initialize()">
  10.               <div id="mapa1" style="width: 600px; height: 360px;"></div>
  11.               <div id="mapa2" style="width: 600px; height: 360px;"></div>
  12.  
  13. </body>
  14. </html>
[HTML] pobierz, plaintext 


[JAVASCRIPT] pobierz, plaintext 
  1. var markerone =	[
  2. 			 [0, 51.504827, -0.07862599999998565, 'Ratusz w Londynie', '', '', '', '', '', ''],
  3. 			]
  4. 	var markertwo =	[
  5. 			 [0, 54.34879, 18.65256899999997, 'Ratusz Głównego Miasta Gdańska', '', '', '', '', '', ''],
  6. 			]
  7. 	var markerMemo = null;
  8. 	var infowindow = null;
  9. 	var info = new google.maps.InfoWindow({
  10. 	maxWidth: 300
  11. 	});
  12. 	var map;
  13.  
  14. 	function initialize() {
  15. 		var myOptionsMap1 = {
  16. 			zoom: 14,
  17. 			center: new google.maps.LatLng(51.50489356890002,-0.07370204693610383),
  18. 			disableDefaultUI: true,
  19. 			navigationControl: true,
  20. 			panControl: true,
  21. 			zoomControl: true,
  22. 			rotateControl: true,
  23. 			overviewMapControl: true,
  24. 			navigationControlOptions: {
  25. 				style: google.maps.NavigationControlStyle.DEFAULT
  26. 			},
  27. 			mapTypeControl: true,
  28. 			mapTypeControlOptions: {
  29. 				style: google.maps.MapTypeControlStyle.DEFAULT
  30. 			},
  31. 			mapTypeId: google.maps.MapTypeId.ROADMAP
  32. 		}
  33. 		var map = new google.maps.Map(document.getElementById("map-1"), myOptionsMap1);
  34. 			for(var i in markerone) {
  35. 			infowindow = '<div class="widows-map"><strong>' + markerone[i][3] + '</strong><p>';
  36. 						if (markerone[i][6] && !markerone[i][7]) {
  37. 							infowindow += markerone[i][6] + '</p>';
  38. 						}
  39. 						if (markerone[i][6] && markerone[i][7]) {
  40. 							infowindow += '<a href="' + markerone[i][7] + '">' + markerone[i][6] + '</a></p>';
  41. 						}
  42. 						if (markerone[i][8]) {
  43. 							infowindow += markerone[i][8] + '<br />';
  44. 						}	
  45. 						if (markerone[i][9]) {
  46. 							infowindow += '<a href="http://maps.google.pl/maps?daddr=' + markerone[i][1] + ', ' + markerone[i][2] + '&hl=pl&ie=UTF8&z=' + map.getZoom() + '">wskazówki dojazdu</a>';
  47. 						}
  48. 						'</div>'
  49. 				if (markerone[i][4]) {
  50. 					var markerOption =
  51. 					{
  52. 						map: map,
  53. 						position: new google.maps.LatLng(markerone[i][1], markerone[i][2]),
  54. 						title: markerone[i][3],
  55. 						html: infowindow,
  56. 						icon: document.getElementById('link').href + markerone[i][4],
  57. 						shadow: markerone[i][5]
  58. 					}
  59. 				} else {
  60. 					var markerOption =
  61. 					{
  62. 						map: map,
  63. 						position: new google.maps.LatLng(markerone[i][1], markerone[i][2]),
  64. 						title: markerone[i][3],
  65. 						html: infowindow
  66. 					}
  67. 				}
  68. 			var marker = new google.maps.Marker(markerOption);
  69. 			if (infowindow) {
  70. 				google.maps.event.addListener(marker, "click", function ()
  71. 			{
  72. 				info.setContent(this.html);
  73. 				info.open(map, this);
  74. 			});
  75. 			}	else {
  76. 				infowindow = '';
  77. 			}
  78. 			if (i==0 && infowindow) {markerMemo = marker;}
  79. 		}
  80. 		if (markerMemo) google.maps.event.trigger(markerMemo, "click");
  81.  
  82. 		var myOptionsMap2 = {
  83. 			zoom: 18,
  84. 			center: new google.maps.LatLng(54.3488118865322,18.65266287731549),
  85. 			disableDefaultUI: true,
  86. 			navigationControl: true,
  87. 			panControl: true,
  88. 			zoomControl: true,
  89. 			rotateControl: true,
  90. 			overviewMapControl: true,
  91. 			navigationControlOptions: {
  92. 				style: google.maps.NavigationControlStyle.DEFAULT
  93. 			},
  94. 			mapTypeControl: true,
  95. 			mapTypeControlOptions: {
  96. 				style: google.maps.MapTypeControlStyle.DEFAULT
  97. 			},
  98. 			mapTypeId: google.maps.MapTypeId.ROADMAP
  99. 		}
  100. 		var map = new google.maps.Map(document.getElementById("map-2"), myOptionsMap2);
  101. 			for(var i in markertwo) {
  102. 			infowindow = '<div class="widows-map"><strong>' + markertwo[i][3] + '</strong><p>';
  103. 						if (markertwo[i][6] && !markertwo[i][7]) {
  104. 							infowindow += markertwo[i][6] + '</p>';
  105. 						}
  106. 						if (markertwo[i][6] && markertwo[i][7]) {
  107. 							infowindow += '<a href="' + markertwo[i][7] + '">' + markertwo[i][6] + '</a></p>';
  108. 						}
  109. 						if (markertwo[i][8]) {
  110. 							infowindow += markertwo[i][8] + '<br />';
  111. 						}	
  112. 						if (markertwo[i][9]) {
  113. 							infowindow += '<a href="http://maps.google.pl/maps?daddr=' + markertwo[i][1] + ', ' + markertwo[i][2] + '&hl=pl&ie=UTF8&z=' + map.getZoom() + '">wskazówki dojazdu</a>';
  114. 						}
  115. 						'</div>'
  116. 				if (markertwo[i][4]) {
  117. 					var markerOption =
  118. 					{
  119. 						map: map,
  120. 						position: new google.maps.LatLng(markertwo[i][1], markertwo[i][2]),
  121. 						title: markertwo[i][3],
  122. 						html: infowindow,
  123. 						icon: document.getElementById('link').href + markertwo[i][4],
  124. 						shadow: markertwo[i][5]
  125. 					}
  126. 				} else {
  127. 					var markerOption =
  128. 					{
  129. 						map: map,
  130. 						position: new google.maps.LatLng(markertwo[i][1], markertwo[i][2]),
  131. 						title: markertwo[i][3],
  132. 						html: infowindow
  133. 					}
  134. 				}
  135. 			var marker = new google.maps.Marker(markerOption);
  136. 			if (infowindow) {
  137. 				google.maps.event.addListener(marker, "click", function ()
  138. 			{
  139. 				info.setContent(this.html);
  140. 				info.open(map, this);
  141. 			});
  142. 			}	else {
  143. 				infowindow = '';
  144. 			}
  145. 			if (i==0 && infowindow) {markerMemo = marker;}
  146. 		}
  147. 		if (markerMemo) google.maps.event.trigger(markerMemo, "click");
  148. 	}
[JAVASCRIPT] pobierz, plaintext

Z góry dziękuje za pomoc
thek
19.01.2015, 11:54:34
A pomyślałeś Ty chociaż gdzie są obie mapy przechowywane i jak Ci je skrypt rozpozna? Zajrzyj w kod a doznasz oświecenia.
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.