自定義彈出式Google地圖

Question

如何用Google地圖做這種彈出式菜單？ 轉到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）

Answer 2

嗨您正在尋找像JSFiddle with custome popup on map click。它只是一個快速的模型，讓你展示如何在mouseover事件中顯示隱藏。您可能會放置一些不錯的動畫並停止事件傳播，或者在點擊時將其作爲事件。

在你的代碼應該尋找是從線120至151

events:{ 
    mouseover: function(marker, event, context){ 
    var listelement = jQuery("li[data-mapid='"+context.data.id+"']"); 
    jQuery(listelement).attr('style','background-color:#ccc'); 
    jQuery(listelement).attr('data-isactive','1'); 
    var map = $(this).gmap3("get"), 
     infowindow = $(this).gmap3({get:{name:"infowindow"}}); 
    if (infowindow){ 
     infowindow.open(map, marker); 
     infowindow.setContent(context.data.ht); 
     jQuery("#customPopup").html(context.data.ht); //This puts html in popup. You can even get html from a jquery template or get it via json if you want. 
     jQuery("#customPopup").show(500); // This part shows the popup 
    } else { 
     $(this).gmap3({ 
     infowindow:{ 
      anchor:marker, 
      options:{content: context.data.ht} 

     } 
     }); 
     jQuery("#customPopup").html(context.data.ht); //This is when no window is present so we create new window and again full it with html as you wish 
     jQuery("#customPopup").show(500); //Then show it to the user 
    } 
    }, 
    mouseout: function(marker,event,context){ 
    var listelement = jQuery("li[data-mapid='"+context.data.id+"']"); 
    jQuery(listelement).attr('style','background-color:#fff'); 
    jQuery(listelement).attr('data-isactive','0'); 
    var infowindow = $(this).gmap3({get:{name:"infowindow"}}); 
    if (infowindow){ 
     infowindow.close(); 
     jQuery("#customPopup").html(""); //Hide the html or not. if you do this then html will go away first before hiding it not so good animated effect but you get the point. 
     jQuery("#customPopup").hide(500); //Take it away from user 
    }