1
나는 Coldfusion 쿼리에서 동적 마커 및 정보 상자가있는 Google지도가 있습니다. infowindow를 페이지의 링크에서 열 수 있기를 원합니다.하지만 jquery를 사용하고 있지만 그 정보는 사용하고 있습니다. 작동하지 않는 경우,이를 수행하는 가장 좋은 방법은 무엇입니까?Coldfusion Google지도 및 Jquery
내 스크립트 : 내가 클릭 함수를 만드는 jQuery를 사용하고
<style>
#map_canvas {
width: 1250px; height: 550px;
float:left;
}
#orders {
margin-top: 0px;
padding-top: 0px;
margin-left: 10px;
float:left;
height: 550px;
}
.order {
border-style:solid;
border-width:thick;
width: 300px;
padding: 5px;
cursor:pointer;
margin-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
</style>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="orders">
<p class="order" data-gig_id="38">
<b>Event 38</b><br/>
Event 1
</p>
<p class="order" data-gig_id="30">
<b>Event 30</b><br/>
Event 2
</p>
<p class="order" data-gig_id="32">
<b>Event 32</b><br/>
Event 3
</p>
<p class="order" data-gig_id="41">
<b>Event 41</b><br/>
Event 4
</p>
<p class="order" data-gig_id="47">
<b>Event 47</b><br/>
Event 5
</p>
</div>
</body>
:
var map;
var lastinfowindow;
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
{ hue: "#0b9cc1" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "administrative.country",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
},
{ featureType: "water",
elementType: "geometry",
stylers: [ { visibility: "on" }, { lightness: -10 }] },
{ featureType: "poi",
stylers: [ { visibility: "on" } ] }
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var latlng = new google.maps.LatLng(40, 13);
var mapOptions = {
zoom: 4,
center: latlng,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var image = 'sp-mark.png';
LatLng = new google.maps.LatLng ('23.00593', '120.65287');
var marker38 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 1 - 38',
icon:image
});
var infowindow38 = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 1</h3><p>Location: Tiawan</p>"
});
google.maps.event.addListener(marker38, 'click', function() {
infowindow38.open(map,marker38);
marker38.gig_id = 38;
marker38.infowindow = infowindow38;
markers[markers.length] = marker38;
});
LatLng = new google.maps.LatLng ('52.19173', '-1.7083');
var marker30 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 2 - 30',
icon:image
});
var infowindow30 = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 2</h3><p>Location: UK</p>"
});
google.maps.event.addListener(marker30, 'click', function() {
infowindow30.open(map,marker30);
marker30.gig_id = 30;
marker30.infowindow = infowindow30;
markers[markers.length] = marker30;
});
LatLng = new google.maps.LatLng ('38.98083', '1.30056');
var marker32 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 3 - 32',
icon:image
});
var infowindow32 = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 3</h3><p>Location: Ibiza</p>"
});
google.maps.event.addListener(marker32, 'click', function() {
infowindow32.open(map,marker32);
marker32.gig_id = 32;
marker32.infowindow = infowindow32;
markers[markers.length] = marker32;
});
LatLng = new google.maps.LatLng ('38.96', '1.39861');
var marker41 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 4 - 41',
icon:image
});
var infowindow41 = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: Ibiza</p>"
});
google.maps.event.addListener(marker41, 'click', function() {
infowindow41.open(map,marker41);
marker41.gig_id = 41;
marker41.infowindow = infowindow41;
markers[markers.length] = marker41;
});
LatLng = new google.maps.LatLng ('-33.92528', '18.42389');
var marker47 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 5 - 47',
icon:image
});
var infowindow47 = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 5</h3><p>Location: Cape Town</p>"
});
google.maps.event.addListener(marker47, 'click', function() {
infowindow47.open(map,marker47);
marker47.gig_id = 47;
marker47.infowindow = infowindow47;
markers[markers.length] = marker47;
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
$(".order").click(function() {
var thisorder = $(this).data("gig_id");
for(var i=0; i<markers.length; i++) {
if(markers[i].gig_id == thisorder) {
console.log("found my match");
//get the latlong
if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
console.dir(markers[i]);
map.panTo(markers[i].getPosition());
markers[i].infowindow.open(map, markers[i]);
lastinfowindow = markers[i].infowindow;
}
}
});
}
이 몸입니다. 이미 결과가 출력되었지만지도가 제대로 작동하지만 infowindow를 여는 링크가 작동하지 않아 Raymond Camden의 예를 사용하고 있습니다.
도움을 주시면 감사하겠습니다.
에 추가하십시오. – duncan
바보 같은 질문 ... 어떻게 확인하나요? – johnnyc0506
catch되지 않은 오류 ReferenceError : 마커는 정의되지 않은 – johnnyc0506