2013-07-04 2 views
0

Моя карта Google работает нормально, но мышь и мышь не показывают div. Может ли кто-нибудь увидеть мою ошибку или что я сделал неправильно? У меня установлен jquery на моем хост-сервере.Google map tooltip mouseover/mouseout

<html> 
<head> 
<title>Map</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 

<script src="jquery/jquery.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 

<script type="text/javascript"> 
function initialize() { 
    var LatLng = new google.maps.LatLng(51.620946, -8.890981); 
    var mapOptions = { 
     zoom: 12, 
     center: LatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';   

    var LatLng = new google.maps.LatLng(51.620946, -8.890981); 
    var marker_0 = new google.maps.Marker({ 
     position:LatLng, 
    map:map, 
    descrip:contentstring, 
    link:'https://www.google.ie/' 
    }) 

    google.maps.event.addListener(marker_0,'mouseover',function(){ 
    tooltip.show(this.descrip); 
    }); 

    google.maps.event.addListener(marker_0,'mouseout',function(){ 
     tooltip.hide(); 
    }); 

    google.maps.event.addListener(marker_0,'click',function(){ 
     window.open(this.link);  
    }); 
} 

$(document).ready(function(){ 
    initialize(); 
}) 



</script> 
</head> 
<body> 
    <div id="map-canvas" style="width:600px;height:400px;border:solid 1px red;"></div> 
</body> 
</html> 

Заранее благодарим за любую помощь.

+0

Есть ли у вас ошибки? Может быть, ошибки кода в консоли? И я не вижу, где всплывающая подсказка фактически определена ... –

ответ

0

Из кода выше, это не выглядит, как вы определили переменной «подсказки»

0

Вместо прохождения descrip и link свойства вашего marker_0, попробуйте просто передавая title и она работает. Как это ...

function initialize() { 
    var LatLng = new google.maps.LatLng(51.620946, -8.890981); 
    var mapOptions = { 
     zoom: 12, 
     center: LatLng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    var contentstring = '<div style="height:50px;background-color:red;width:50px;">Hello</div>';   

    var marker_0 = new google.maps.Marker({ 
     position:LatLng, 
     map:map, 
     title: contentstring 
     //descrip:contentstring, 
     //link:'https://www.google.ie/' 
    }) 

    /* 

    ** HAVE COMMENTED THIS BIT OUT AS THE MARKER ABOVE WILL WORK AS A TOOL TIP ** 
    google.maps.event.addListener(marker_0,'mouseover',function(){ 
     tooltip.show(this.descrip); 
    }); 

    google.maps.event.addListener(marker_0,'mouseout',function(){ 
     tooltip.hide(); 
    }); 

    google.maps.event.addListener(marker_0,'click',function(){ 
     window.open(this.link);  
    }); */ 
} 

Существует а Simple Marker Exmaple Here

свойства, которые могут быть использованы для маркеров listes в DOCS.

Надеюсь, это поможет.

Смежные вопросы