我在谷歌地图信息窗口中添加了一个监听器，打开一个颜色框，其中包含有关该标记的一些信息。
我的问题是颜色框仅适用于我点击的第一个标记。例如：我单击一个标记并打开颜色框，如果我关闭此标记并打开另一个标记，控制台将显示以下错误：
Uncaught TypeError: $(...).colorbox is not a function
但是，如果我重新打开相同的标记以便第一次打开，它不会显示错误，并再次通过颜色框打开信息。
我在页面加载时首先点击的任何标记都会显示信息，但是，如果我关闭并尝试其他标记，而不刷新页面，则无法打开并显示错误
标记正在通过mysql和php填充。
我的代码
<script type="text/javascript">
var icon = new google.maps.MarkerImage('http://www.yolps.com.br/imagens/ic_mapaok.png',
new google.maps.Size(50,50),
new google.maps.Point(0,0),
new google.maps.Point(0,0),
new google.maps.Size(50,50));
var center = null;
var map = null;
var currentPopup;
var geocoder;
var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info
//maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
//FUNCTION TO CALL COLORBOX
google.maps.event.addListener(popup, "domready", function() {
$(".inline").colorbox({inline:true, width:"1026px"});
$('.inline').click(function(){
var data_id = $(this).data('id');
$('#idvalue').html(""+data_id);
$.ajax({
type: "GET",
url: "view/detalhes.php?eventoid="+data_id,
success: function(data) {
$('#evento2').html(data);
}
});
});
});
$.colorbox.close();
}
function initMap() {
geocoder = new google.maps.Geocoder();
if(!!navigator.geolocation) {
/*var map;
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions); */
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0,0),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
});
navigator.geolocation.getCurrentPosition(function(position) {
var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var accu = position.coords.accuracy / 30;
geocoder.geocode({'latLng': geolocate}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results)
if (results[1]) {
//formatted address
//alert(results[0].formatted_address)
//find country name
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {
//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "locality") {
//this is the object you are looking for
city= results[0].address_components[i];
break;
}
}
}
var infowindow = new google.maps.InfoWindow({
map: map,
position: geolocate,
content:'<h3 class="texto"> Você esta em '+ city.short_name +'!</h3>'
});
}else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
/*var marker1 = new google.maps.GeolocationMarker({
icon: pinImage
});*/
var circle = new google.maps.Circle({
center: geolocate,
radius: accu,
map: map,
fillColor: 'rgb(161, 142, 0)',
fillOpacity: 0.3,
strokeColor: 'rgb(255, 204, 0)',
strokeOpacity: 0.7
});
map.fitBounds(circle.getBounds());
map.setCenter(geolocate);
});
} else {
document.getElementById('google_canvas').innerHTML = 'No Geolocation Support.';
}
<?php
require_once 'connect.php';
$query = mysql_query("SELECT * from localizacoes WHERE dataevento >= ((now()- INTERVAL 1 DAY) - INTERVAL 3 HOUR)");
while ($row = mysql_fetch_array($query)){
$r = explode( ',', $row['posicao'] );
$name=$row['nome'];
$lat = $r[0];
$lon = $r[1];
$desc=$row['descricao'];
$image = '<a class="inline" href="#inline_content" data-id="'.$row['id'].'" ><img class="foto" src="http://www.yolps.com.br/uploadedimages/'.$row['imagem'].'"/></a>';
// $image = '<a href="http://yolps.com.br/evento/'.$row['id'].'/'.$row['nome'].'" alt="Clique para detalhes" target="_blank"><img class="foto" src="http://www.yolps.com.br/uploadedimages/'.$row['imagem'].'"/></a>';
$dataevento = explode( '-', $row['dataevento'] );
$ano = $dataevento[0];
$mes = $dataevento[1];
$dia = $dataevento[2];
//$d = nl2br($desc);
$de = str_replace("\n", "</br>", $desc);
echo ("addMarker($lat, $lon,'<h1>$name</h1>$image');\n");
}
?>
//center = bounds.getCenter();
//google.maps.event.addDomListener(window, "load", initMap);
}
google.maps.event.addDomListener(window, 'load', initMap);
//setTimeout(function() { initMap(); },5000);
</script>
</head>
<script>
function refresh(){
$(document).ready(function(){
setTimeout(function() { initMap(); },2000);
});
}
</script>