Jump to content
  • 0

JS гугл карты


Mary_RND
 Share

Question

Доброго времени суток.
Работаю сейчас с 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 я не очень хорошо работаю, а тут еще гугл карты. ><

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

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

	<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

Link to comment
Share on other sites

  • 0

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

<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>
Link to comment
Share on other sites

  • 0

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

			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);				}			}
Link to comment
Share on other sites

  • 0

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

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

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

(55.7695689, 37.6226591)

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

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

Link to comment
Share on other sites

  • 0

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

 

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

Link to comment
Share on other sites

  • 0
Или вы имеете ввиду, чтобы там сразу для удобства были все поля, которые должны браться из 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>
Link to comment
Share on other sites

  • 0

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

Я так поняла что 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);				}			}
Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy