JS гугл карты

[Mary_RND]

Доброго времени суток.
Работаю сейчас с xslt в umi
Вопрос такого плана:
 
Есть гугл карта, для двух городов, у одной один адрес, а у другой - 6,
На карте есть 6 полей с описание, адресом и телефоном, если на поле нажимаешь, то карта показывает маркер на нужном адресе
 
Я сделала обращение к полям, т.е. заполняется все отлично через админку.
Если у офиса поменяется адрес, то ничего сложного нет, заходишь в админку, меняешь координаты в созданном специально для этого поле, все хорошо.
 
Но! Есть одна неприятность при создании нового адреса.

У плашек есть тип данных Адрес, на каждый новый адрес, надо создать в типе данных новое поле для координат.
И каждый раз прописывать вот такие поля в коде для карты, а доступ пользователю в код... ну как-то не вариант давать...

var pos2 = new google.maps.LatLng(<xsl:value-of select="//property[@name = 'koordinaty']/value" />);var pos3 = new google.maps.LatLng(<xsl:value-of select="//property[@name = 'koordinaty_1']/value" />);....var pos(n) = new google.maps.LatLng(<xsl:value-of select="//property[@name = 'koordinaty_(n)']/value" />);

var marker2 = new google.maps.Marker({                    position: pos2,                    map: map_msk,                    icon: image_msk                });

А вот плашечка, для которой есть поле под добавление класса:           

   $("<xsl:value-of select="//property[@name = 'css_class_city']/value" />").click(function(){                    var coords = pos2;                    map_msk.panTo(coords);                });

 
Вопрос. я не знаю как сделать, чтобы был цикл_{(так получается?)} на позиции, маркеры и плашки, именно на js.

Просто вписать xslt в js думаю смогу, уже делала так. Но с самим js я не очень хорошо работаю, а тут еще гугл карты. ><

[Art Lev]

используйте xsl:for-each

[Mary_RND]

Так получается?

	<xsl:template match="result[page/@type-id = '140']">		<section umi:element-id="{$document-page-id}" umi:field-name="content" umi:empty="&empty-page-content;">			<div class="relative map_msk">				<div id="map_msk"></div>				<div class="buttons">					<xsl:apply-templates select="document('usel://address/245/181')/udata" mode="address"/>				</div>			</div>			</section>	</xsl:template>	<!-- Address MsK-->	  	<xsl:template match="udata" mode="address">		<xsl:apply-templates select="page" mode="address"/>	</xsl:template>			<xsl:template match="page" mode="address">		<xsl:for-each select="page"><!-- не могу только понять, как узел мне именно нужен -->			<div class="" id="">				<xsl:attribute name="class">					<xsl:value-of select="extended/properties/property[@name = 'css_class_city']/value" />				</xsl:attribute>				<xsl:attribute name="id">					<xsl:value-of select=".//property[@name = 'css_id_city']/value" />				</xsl:attribute>				<p><xsl:value-of select=".//property[@name = 'nazvanie']/value" disable-output-escaping="yes" /></p>				<span>					<xsl:value-of select=".//property[@name = 'adres_podrobnyj']/value" disable-output-escaping="yes" /><br />					<xsl:value-of select=".//property[@name = 'telefony']/value" disable-output-escaping="yes" />				</span>			</div>		</xsl:for-each>	</xsl:template>	<!--/ Address MsK-->

Или это надо прописать в скрипте?

Но тогда как правильно? А то я новичок в xslt...

 

Думала как-то надо сделать в цикле позиции маркера и  плашки сделать на js

[rus]

все просто, должно получиться что-то вроде:

<script type="text/javascript">	<?php for($i = 0; $i <= 6; $i++): ?>		var pos<?php=$i;?> = new google.maps.LatLng(<xsl:value-of select="//property[@name = 'koordinaty']/value" />);		var marker<?php=$i;?> = new google.maps.Marker({			position: pos<?php=$i;?>,			map: map_msk,			icon: image_msk		});		$("<xsl:value-of select="//property[@name = 'css_class_city']/value" />").click(function(){			var coords = pos<?php=$i;?>;			map_msk.panTo(coords);		});	<?php endfor; ?></script>

[Mary_RND]

А можно я сюда весь код карты сброшу? ><

[rus]

дык никто не запрещает этого делать в принципе

[Mary_RND]

Вот. А то... посмотрела код, думала что поняла, открыла свой код и поняла... что я ничего не поняла... >.<

			function initialize() {				var pos1 = new google.maps.LatLng(59.921090, 30.343043);								var pos2 = new google.maps.LatLng(55.7695689, 37.6226591);				var pos3 = new google.maps.LatLng(55.7379675, 37.625534); 				var pos4 = new google.maps.LatLng(55.7580242, 37.5633864); 				var pos5 = new google.maps.LatLng(55.7387458, 37.6552768); 				var pos6 = new google.maps.LatLng(55.7387478, 37.6549528);				var pos7 = new google.maps.LatLng(54.626516, 39.731236);					///SPB MAP =============================================================================				var mapOptions_spb = {					zoom: 17,					scrollwheel: false,					center: new google.maps.LatLng(59.921090, 30.343043),					mapTypeId: google.maps.MapTypeId.ROADMAP,					styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2e5d4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]}]				};								var map_spb = new google.maps.Map(document.getElementById('map_spb'),					mapOptions_spb);				var image_spb = '..//templates/demodizzy/images/beachflag.png';											var marker = new google.maps.Marker({					position: pos1,					map: map_spb,					icon: image_spb				});	///MSK MAP =============================================================================				var mapOptions_msk = {					zoom: 17,					scrollwheel: false,					center: new google.maps.LatLng(55.7695689, 37.6226591),					mapTypeId: google.maps.MapTypeId.ROADMAP,					styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]				};								var map_msk = new google.maps.Map(document.getElementById('map_msk'),					mapOptions_msk);					var image_msk = '..//templates/demodizzy/images/beachflag_a.png';			//	var image_msk = new google.maps.MarkerImage(  'images/beachflag_msk.png',  new google.maps.Size(81,112), new google.maps.Point(0,0), new google.maps.Point(0,112)); 			//	var	image_mskHover = new google.maps.MarkerImage( 'images/beachflag_msk.png', new google.maps.Size(81,112), new google.maps.Point(0,112), new google.maps.Point(0,112) ); 								var marker2 = new google.maps.Marker({					position: pos2,					map: map_msk,					icon: image_msk				});				var marker3 = new google.maps.Marker({					position: pos3,					map: map_msk,					icon: image_msk				});				var marker4 = new google.maps.Marker({					position: pos4,					map: map_msk,					icon: image_msk				});				var marker5 = new google.maps.Marker({					position: pos5,					map: map_msk,					icon: image_msk				});				var marker6 = new google.maps.Marker({					position: pos6,					map: map_msk,					icon: image_msk				});				var marker7 = new google.maps.Marker({					position: pos7,					map: map_msk,					icon: image_msk				});						/*function showCity(event) {					var coords = new google.maps.LatLng(event.data.lat, event.data.lng);					map.setCenter(coords);				}*/				$(".butSpb").click(function(){					var coords = pos1;					map_spb.panTo(coords);///*				});				$(".butCvet").click(function(){					var coords = pos2;					map_msk.panTo(coords);				});				$(".butNewArb").click(function(){					var coords = pos3;					map_msk.panTo(coords);				});				$(".butTrehgor").click(function(){					var coords = pos4;					map_msk.panTo(coords);				});				$(".butTagan").click(function(){					var coords = pos5;					map_msk.panTo(coords);				});				$(".butBaby").click(function(){					var coords = pos6;					map_msk.panTo(coords);				});				$(".butRyazan").click(function(){					var coords = pos7;					map_msk.panTo(coords);				});			}						google.maps.event.addDomListener(window, 'load', initialize);						function smoothZoom (map_msk, max, cnt) {				if (cnt >= max) {					return;				}				else {					z = google.maps.event.addListener(map_msk, 'zoom_changed', function(event){						google.maps.event.removeListener(z);						smoothZoom(map_msk, max, cnt + 1);					});				setTimeout(function(){map_msk.setZoom(cnt)}, 80); // 80ms is what I found to work well on my system -- it might not work well on all systems				}			};			function zoomTo(){				//console.log(zoomFluid);				if(zoomFluid==10) return 0;				else {					zoomFluid ++;					map_msk.setZoom(zoomFluid);					setTimeout("zoomTo()", 500);				}			}

[rus]

так вы же написали что:

Я сделала обращение к полям, т.е. заполняется все отлично через админку. Если у офиса поменяется адрес, то ничего сложного нет, заходишь в админку, меняешь координаты в созданном специально для этого поле, все хорошо.

соотв. все данные которые:

(55.7695689, 37.6226591)

'..//templates/demodizzy/images/beachflag.png'

и им подобные - доставайте из cms для которой вы писали плагин.

[Mary_RND]

ну здесь я данные не вписывала, просто ваш код как вставить в мой @_@

 

Или вы имеете ввиду, чтобы там сразу для удобства были все поля, которые должны браться из cms?

[rus]

Или вы имеете ввиду, чтобы там сразу для удобства были все поля, которые должны браться из cms?

да, типа того, вот например как это реализовано в джумла, плагин luna вроде называется, уж не знаю кто его писал:

<script>    var map;    function initialize() {        var mapOptions = {            /*zoom: <?php echo $this->params->get('zoom'); ?>,*/	    zoom: 5,            center: new google.maps.LatLng(<?php echo $this->params->get('center_lat'); ?>, <?php echo $this->params->get('center_lng'); ?> ),            mapTypeId: google.maps.MapTypeId.ROADMAP        };        map = new google.maps.Map(document.getElementById('map-canvas'),            mapOptions);    <?php foreach ($this->items as $item) : ?>        <?php if ($item->lat && $item->lng) : ?>		var image<?php echo $item->id; ?> = '<?php echo $item->list_image; ?>';//'images/logo.png';		/*var image<?php echo $item->id; ?> = new google.maps.MarkerImage(			'<?php echo $item->list_image ?>',			// Этот маркер имеет ширину в 40 пикселей, а высоту - 40.			new google.maps.Size(40, 40),			// Позиционирование изображения в начале координат {0,0}			new google.maps.Point(0,0),			// центр маркера (0, 40) — нижний левый угол.			new google.maps.Point(0, 40)		);*/        var marker<?php echo $item->id; ?> = new google.maps.Marker({            position: new google.maps.LatLng(<?php echo $item->lat; ?>, <?php echo $item->lng; ?> ),            title:"<?php echo htmlentities($item->title); ?>",			icon: image<?php echo $item->id; ?>        });        var contentString<?php echo $item->id; ?> = '' +            '<div style="width: 300px;height: 120px;">' +            <?php if ($item->list_image) : ?>            '<img src="<?php echo $item->list_image ?>" style="width: 90px; height: 90px; overflow:hidden; float: left; margin-right: 20px;" />' +            <?php endif ?>            '<a style="font-size: 1.2em" href="<?php echo JRoute::_('index.php?option=com_luna&view=project&project_id='.$item->id); ?>"><?php echo $item->title; ?></a></div>';        var infowindow<?php echo $item->id; ?> = new google.maps.InfoWindow({            content: contentString<?php echo $item->id; ?>        });        <?php if ($item->id == JRequest::getInt('project_id')) : ?>        infowindow<?php echo $item->id; ?>.open(map,marker<?php echo $item->id; ?>);        map.setCenter(new google.maps.LatLng(<?php echo $item->lat; ?>, <?php echo $item->lng; ?>));        <?php else : ?>        google.maps.event.addListener(marker<?php echo $item->id; ?>, 'click', function() {            infowindow<?php echo $item->id; ?>.open(map,marker<?php echo $item->id; ?>);        });        <?php endif ?>        marker<?php echo $item->id; ?>.setMap(map);        <?php endif ?>    <?php endforeach ?>    }    google.maps.event.addDomListener(window, 'load', initialize);</script>

[Mary_RND]

Ну если расставить поля, то выглядит так... Есть две разные карты. На одной есть один адрес.Я

Я так поняла что pos1n+1 это будет тоже переменная?

function initialize() {				var pos1 = new google.maps.LatLng(<xsl:value-of select="//property[@name = 'koordinaty']/value" />);								var pos2 = new google.maps.LatLng(<xsl:value-of select="//property[@name = 'koordinaty']/value" />);				var pos3 = new google.maps.LatLng(<xsl:value-of select="//property[@name = 'koordinaty']/value" />); 				var pos4 = new google.maps.LatLng(<xsl:value-of select="//property[@name = 'koordinaty']/value" />); 				var pos5 = new google.maps.LatLng(<xsl:value-of select="//property[@name = 'koordinaty']/value" />); 				var pos6 = new google.maps.LatLng(<xsl:value-of select="//property[@name = 'koordinaty']/value" />);				var pos7 = new google.maps.LatLng(<xsl:value-of select="//property[@name = 'koordinaty']/value" />);					///SPB MAP =============================================================================				var mapOptions_spb = {					zoom: 17,					scrollwheel: false,					center: new google.maps.LatLng(59.921090, 30.343043),					mapTypeId: google.maps.MapTypeId.ROADMAP,					styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2e5d4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{"featureType":"road","elementType":"all","stylers":[{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]}]				};								var map_spb = new google.maps.Map(document.getElementById('map_spb'),					mapOptions_spb);				var image_spb = '<xsl:value-of select="//property[@name = 'image_spb']/value" />';											var marker = new google.maps.Marker({					position: pos1,					map: map_spb,					icon: image_spb				});	///MSK MAP =============================================================================				var mapOptions_msk = {					zoom: 17,					scrollwheel: false,					center: new google.maps.LatLng(55.7695689, 37.6226591),					mapTypeId: google.maps.MapTypeId.ROADMAP,					styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]				};								var map_msk = new google.maps.Map(document.getElementById('map_msk'),					mapOptions_msk);					var image_msk = '<xsl:value-of select="//property[@name = 'image_msk']/value" />';			//	var image_msk = new google.maps.MarkerImage(  'images/beachflag_msk.png',  new google.maps.Size(81,112), new google.maps.Point(0,0), new google.maps.Point(0,112)); 			//	var	image_mskHover = new google.maps.MarkerImage( 'images/beachflag_msk.png', new google.maps.Size(81,112), new google.maps.Point(0,112), new google.maps.Point(0,112) ); 								var marker2 = new google.maps.Marker({					position: pos2,					map: map_msk,					icon: image_msk				});				var marker3 = new google.maps.Marker({					position: pos3,					map: map_msk,					icon: image_msk				});				var marker4 = new google.maps.Marker({					position: pos4,					map: map_msk,					icon: image_msk				});				var marker5 = new google.maps.Marker({					position: pos5,					map: map_msk,					icon: image_msk				});				var marker6 = new google.maps.Marker({					position: pos6,					map: map_msk,					icon: image_msk				});				var marker7 = new google.maps.Marker({					position: pos7,					map: map_msk,					icon: image_msk				});						/*function showCity(event) {					var coords = new google.maps.LatLng(event.data.lat, event.data.lng);					map.setCenter(coords);				}*/				$("<xsl:value-of select="//property[@name = 'css_class_city']/value" />").click(function(){					var coords = pos1;					map_spb.panTo(coords);				});				$("<xsl:value-of select="//property[@name = 'css_class_city']/value" />").click(function(){					var coords = pos2;					map_msk.panTo(coords);				});				$("<xsl:value-of select="//property[@name = 'css_class_city']/value" />").click(function(){					var coords = pos3;					map_msk.panTo(coords);				});				$("<xsl:value-of select="//property[@name = 'css_class_city']/value" />").click(function(){					var coords = pos4;					map_msk.panTo(coords);				});				$("<xsl:value-of select="//property[@name = 'css_class_city']/value" />").click(function(){					var coords = pos5;					map_msk.panTo(coords);				});				$("<xsl:value-of select="//property[@name = 'css_class_city']/value" />").click(function(){					var coords = pos6;					map_msk.panTo(coords);				});				$("<xsl:value-of select="//property[@name = 'css_class_city']/value" />").click(function(){					var coords = pos7;					map_msk.panTo(coords);				});			}						google.maps.event.addDomListener(window, 'load', initialize);						function smoothZoom (map_msk, max, cnt) {				if (cnt >= max) {					return;				}				else {					z = google.maps.event.addListener(map_msk, 'zoom_changed', function(event){						google.maps.event.removeListener(z);						smoothZoom(map_msk, max, cnt + 1);					});				setTimeout(function(){map_msk.setZoom(cnt)}, 80); // 80ms is what I found to work well on my system -- it might not work well on all systems				}			};			function zoomTo(){				//console.log(zoomFluid);				if(zoomFluid==10) return 0;				else {					zoomFluid ++;					map_msk.setZoom(zoomFluid);					setTimeout("zoomTo()", 500);				}			}

[Mary_RND]

вау... как код перекосило то О_О

[Mary_RND]

В 17.03.2016в20:15, rus сказал:

да, типа того, вот например как это реализовано в джумла, плагин luna вроде называется, уж не знаю кто его писал:

Я скинула код свой, расставив какие теоретически там буду поля из umi.

Хотя код слегка так перекосило О_о