Custom popup Google map

Question

How to get to do this kind of popup with google map? Go http://www.flightradar24.com/ and click on an airport and can see that the popup is completely personalized. So I managed to create popup on google map but now I do not see how this is put a different message for each popup. And how to customize the popup with css and javascript include inside? So now I'm here and I want to know if for the moment my script is correct and how to later to reach a popup like Flightradar24 airport?

<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

Hi You are looking for something like JSFiddle with custome popup on map click. Its just a quick mockup for you to show how you can do show hide on mouseover event. You probably can put some nice animation and stop event propagation or make it an event on click as well.

The code in you should be looking at is from line 120 to 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
    }

Answer 2

If you change your addMarkerWithWindow function to use it's arguments in the popup, 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 doesn't work in IE)