javascript - 自定义弹出谷歌地图

Question

如何使用谷歌地图进行这种弹出窗口？ 去 http://www.flightradar24.com/点击一个机场，可以看到弹出窗口是完全个性化的。 所以我设法在谷歌地图上创建弹出窗口，但现在我不知道如何为每个弹出窗口放置不同的消息。 以及如何使用 css 和 javascript 自定义弹出窗口？ 现在我在这里，我想知道我的脚本目前是否正确，以及稍后如何到达像 Flightradar24 机场这样的弹出窗口？

<script type='text/javascript'> $(function(){function initialize() {
    var mapOptions = {
      zoom: 4,
       disableDefaultUI: true,
      center: new google.maps.LatLng(45.35, 4.98),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'),
                                  mapOptions);

    addMarkerWithWindow("This is Lemans", new google.maps.LatLng(48.006922, 0.20874), map);
addMarkerWithWindow("This is Paris", new google.maps.LatLng(48.856291, 2.352705), map);
}



    function addMarkerWithWindow(name, coordinate, map) {
var popup=$('<div/>', {
    content: name
});

    var image = 'rss.png';
    var marker = new google.maps.Marker({
    map: map,
icon: image,
    position: coordinate
});



    var styles = [
   {
      featureType: "all",
      stylers: [
        { saturation: -15 },
        { lightness: -10 },
      ]
    },

            ];
map.setOptions({styles: styles});



//  jQuery 

var popup=$('<div/>', {
    'id':'This is Lemans',
    'text':'Hello World!'

}).dialog({
    'autoOpen':false,
    'width': 600,
    'height':600,
    'resizable':false,
    'modal':false,
    'title':'Le Mans'
});


google.maps.event.addListener(marker, 'click', function(e) {
    console.log(e);
    popup.dialog('open');
});}initialize();});//]]>  </script>

Answer 1

如果您更改 addMarkerWithWindow 函数以在弹出窗口中使用它的参数，your code works for me :

function addMarkerWithWindow(name, coordinate, map) {
    var image = 'rss.png';
    var marker = new google.maps.Marker({
      map: map,
      // icon: image,
      position: coordinate
    });

   //  jQuery 
   var popup=$('<div/>', {
    'id':'This is '+name,
    'text':'Hello World!'

   }).dialog({
    'autoOpen':false,
    'width': 600,
    'height':600,
    'resizable':false,
    'modal':false,
    'title':name
   });


   google.maps.event.addListener(marker, 'click', function(e) {
    // console.log(e);
    popup.dialog('open');
   });
}

(console.log 在 IE 中不起作用)