Главная > Javascript > google maps open marker with link – открыть хинт кликом по ссылке

google maps open marker with link – открыть хинт кликом по ссылке

Открыть хинт нажатием по ссылке вне карты:
Полный рабочий пример:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var markers=[];
	function initialize(){
		var hLatlng=new google.maps.LatLng(59.939095,30.315868);
		var hOptions={
			zoom:10,
			center:hLatlng,
			panControl:false,
			zoomControl:true,
			scalecontrol:true,
			scrollwheel:false,
			mapTypeId:google.maps.MapTypeId.ROADMAP
		}
		var map=new google.maps.Map(document.getElementById("map_canvas"),hOptions); 
		var contentString='<div class="info_content" id="info_content_1"><p>Адрес 1</p></div>';
		var iLatlng=new google.maps.LatLng(59.939095,30.315868);
		var infowindow_1=new google.maps.InfoWindow({
			content:contentString
		});
		var marker_1=new google.maps.Marker({
			position:iLatlng,
			map:map,
			title:'Адрес 1'
		});
		markers.push(marker_1);
		google.maps.event.addListener(marker_1,'click',function(){
			infowindow_2.close();
			infowindow_1.open(map,marker_1);
		});
		var contentString='<div class="info_content" id="info_content_2"><p>Адрес 2</p></div>';
		var iLatlng=new google.maps.LatLng(59.90825,30.362823);
		var infowindow_2=new google.maps.InfoWindow({
			content:contentString
		});
		var marker_2=new google.maps.Marker({
			position:iLatlng,
			map:map,
			title:'Адрес 2'
		});
		markers.push(marker_2);
		google.maps.event.addListener(marker_2,'click',function(){
			infowindow_1.close();
			infowindow_2.open(map,marker_2);
		});
	}
	$(window).load(function(){
		initialize();
	})
</script>
<div class="addr_item">
	<p>Адрес 1 <a href="javascript:google.maps.event.trigger(markers[0],'click');">Показать на карте</a></p>
</div>
<div class="addr_item">
	<p>Адрес 2 <a href="javascript:google.maps.event.trigger(markers[1],'click');">Показать на карте</a></p>
</div>
<div id="map_canvas" style="width:640px;height:480px;"></div>

Для дополнительного функционала добавлено:
var markers=[];
markers.push(marker_1);
javascript:google.maps.event.trigger(markers[0],'click');
Предполагается, что адреса внутри foreach и порядок их инициализации на карте, и порядок ссылок совпадает.
infowindow_1.close(); – здесь нужно закрыть все остальные infowindow – также foreach тот же массив

Categories: Javascript Tags:
  1. Пока что нет комментариев.
Похожие публикации