Google Maps V3 Erreur InfoWindow

J'utilise une simple API Google Maps sur une simple page Web. La carte contient quelques icônes personnalisées et une infoWindow est configurée. Lorsque vous ouvrez infoWindow/bubble en cliquant sur une icône, la carte ne fait pas d'autopan et en cliquant sur le X sur la bulle d'info ne la ferme pas. J'utilise JQuery mais j'ai fait le test sans elle et ça ne fonctionnait toujours pas. Après avoir cliqué sur une icône et en regardant la console Firebug je vois le message d'erreur suivant:Google Maps V3 Erreur InfoWindow

bO est pas une fonction

(75 hors de portée 42)

J'ai mis en place un cas de test jsFiddle pour cela mais j'inclus également le code ici (le JavaScript est dans le corps car le code fait partie d'un contrôle).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
     function GetMapBubbleContent(id) { 
      return 'content'; 
     } 

     var infowindow = new google.maps.InfoWindow(); 
     var map_plants; 

     function InitializeMap() { 
      var imagesPath = 'http://lh6.ggpht.com/eib8rqN0V8k1Jhnu56cqubkvaEPf_6BXgyEqBPUCj9mHo57xXpMZAMUqr6SPj5b3cUQrqnoNc4Ct3Ps0zRg=s36'; 
      var image = new google.maps.MarkerImage(imagesPath, new google.maps.Size(36, 36), new google.maps.Point(0, 0), new google.maps.Point(0, 36)); 
      var shadow = new google.maps.MarkerImage(imagesPath, new google.maps.Size(55, 45), new google.maps.Point(0, 0), new google.maps.Point(0, 45)); 
      var shape = { 
       coord: [0, 0, 36, 0, 36, 36, 0, 36], 
       type: 'poly' 
      }; 
      var image_own = new google.maps.MarkerImage(imagesPath, new google.maps.Size(36, 36), new google.maps.Point(0, 0), new google.maps.Point(0, 36)); 

      var image_small = new google.maps.MarkerImage(imagesPath, new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(0, 20)); 
      var shadow_small = new google.maps.MarkerImage(imagesPath, new google.maps.Size(30, 25), new google.maps.Point(0, 0), new google.maps.Point(0, 25)); 
      var shape_small = { 
       coord: [0, 0, 20, 0, 20, 20, 0, 20], 
       type: 'poly' 
      }; 
      var image_small_own = new google.maps.MarkerImage(imagesPath, new google.maps.Size(20, 20), new google.maps.Point(0, 0), new google.maps.Point(0, 20)); 
      var latlng = new google.maps.LatLng(46.239343, 5.399111); 

      var myOptions = { 
       zoom: 6, 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.HYBRID, 
       pancontrol: false, 
       zoomcontrol: true, 
       scalecontrol: true 
      }; 

      infowindow = new google.maps.InfoWindow(); 
      map_plants = new google.maps.Map(document.getElementById("panelMap"), myOptions); 

      var mrk0 = new google.maps.Marker({ 
       position: new google.maps.LatLng(48.183909, 10.977222), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test1', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk0, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(1218)); 
       infowindow.open(1218, mrk0); 
      }); 
      var mrk1 = new google.maps.Marker({ 
       position: new google.maps.LatLng(45.574806, 11.834682), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test2', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk1, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(1131)); 
       infowindow.open(1131, mrk1); 
      }); 
      var mrk2 = new google.maps.Marker({ 
       position: new google.maps.LatLng(48.976219, 16.977306), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test3', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk2, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(911)); 
       infowindow.open(911, mrk2); 
      }); 
      var mrk3 = new google.maps.Marker({ 
       position: new google.maps.LatLng(1.000000, 15.000000), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test4', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk3, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(1422)); 
       infowindow.open(1422, mrk3); 
      }); 
      var mrk4 = new google.maps.Marker({ 
       position: new google.maps.LatLng(48.055114, 9.052830), 
       icon: image_own, 
       shape: shape, 
       shadow: shadow, 
       title: 'Test5', 
       map: map_plants 
      }); 
      google.maps.event.addListener(mrk4, 'click', function() { 
       infowindow.close(); 
       infowindow.setContent(GetMapBubbleContent(687)); 
       infowindow.open(687, mrk4); 
      }); 
     } 

     $(document).ready(function() { 
      InitializeMap(); 
     }); 
    </script> 
    <div id="panelMap" style="height: 600px; width: 600px; overflow: hidden;"> 
</body> 
</html>

Source

2011-06-13 Germstorm

Il semble que votre écouteurs d'événements sont incorrects ..

google.maps.event.addListener(mrk1, 'click', function() { 
    infowindow.close(); 
    infowindow.setContent(GetMapBubbleContent(1131)); 
    infowindow.open(1131, mrk1); 
});

La ligne ouverte infowindow devrait être:

infowindow.open(map_plants, mrk1);

Ouvert prend comme param la carte et la marque ainsi cela a fonctionné pour moi dans ton violon.

Working fiddle update here.

EDIT: En outre, upvote pour un bien pensé, exemple détaillé où l'on voit que vous avez fait le travail.

Source

2011-06-13 15:19:39 Khepri

Merci beaucoup Khepri. C'était en effet le problème. Le code du marqueur a été généré automatiquement et un espace réservé a été égaré. – Germstorm

Google Maps V3 Erreur InfoWindow

Répondre

Questions connexes