jQuery UI Bootstrap

jQuery UI Bootstrap

A Bootstrap-themed kickstart for jQuery UI widgets (v1.0 alpha).

Demo map

GMap3 allows you to finely manipulate yours markers and others objects, to associate custom data usable in each event.
This is an example of using jQuery UI Bootstrap with gmap3.

Accordion

This page can't load Google Maps correctly.
Do you own this website?

Paris is the capital and largest city of France.
It is situated on the river Seine, in northern France, at the heart of the Île-de-France region.
The city of Paris, within its administrative limits (the 20 arrondissements), has a population of about 2,230,000.
Its metropolitan area is one of the largest population centres in Europe, with more than 12 million inhabitants.

Paris on Wikipedia 


  1. function selectCity(index, updateAccordion) {
  2.     if (updateAccordion) {
  3.         $( "#accordion-map" ).accordion("option", "active", index);
  4.     }
  5.     $('#gmap3').gmap3({
  6.         exec: {
  7.             name: "marker",
  8.             all:"true",
  9.             func: function(value){
  10.                 // data.object is the google.maps.Marker object
  11.                 if (value.data.index === index) {
  12.                     value.object.setIcon("http://maps.google.com/mapfiles/marker_green.png");
  13.                 } else {
  14.                     value.object.setIcon("http://maps.google.com/mapfiles/marker.png");
  15.                 }
  16.             }
  17.         }
  18.     });
  19. }
  20. $(function(){
  21.     //##### Accordion with gmap3
  22.  
  23.     $( "#accordion-map" ).accordion({
  24.         header: "h3",
  25.         activate: function(event, ui) {
  26.             // index / 2 because of the 2 elements by set (h3 + div)
  27.             selectCity(ui.newHeader.index() / 2);
  28.         }
  29.     });
  30.  
  31.     $('#gmap3').gmap3({
  32.         map:{
  33.             options:{
  34.                 center:[46.578498,2.457275],
  35.                 zoom: 5
  36.             }
  37.         },
  38.         marker:{
  39.             values:[
  40.                 {latLng:[48.8620722, 2.352047], data: {index: 0},
  41.                     options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}
  42.                 },
  43.                 {address:"86000 Poitiers, France", data: {index: 1}},
  44.                 {address:"66000 Perpignan, France", data: {index: 2}}
  45.             ],
  46.             options:{
  47.                 draggable: false
  48.             },
  49.             events:{
  50.                 click: function (marker, event, context) {
  51.                     selectCity(context.data.index, true);
  52.                 }
  53.             }
  54.         }
  55.     });
  56. });

Tabs

This page can't load Google Maps correctly.
Do you own this website?
  1. // invoque google maps on 2 divs
  2. $(".gmap3").gmap3({
  3.     map: {
  4.         options: {
  5.             zoom: 6,
  6.             center: [49.265984, -123.127491],
  7.             mapTypeId: google.maps.MapTypeId.ROADMAP
  8.         }
  9.     }
  10. });
  11.  
  12. // Append the meteo layer on weather map
  13. var map = $("#weather").gmap3("get");
  14.  
  15. var weatherLayer = new google.maps.weather.WeatherLayer({
  16.     temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
  17. });
  18. weatherLayer.setMap(map);
  19.  
  20. var cloudLayer = new google.maps.weather.CloudLayer();
  21. cloudLayer.setMap(map);
  22.  
  23.  
  24. // force maps to refresh on show
  25. $("#tabs").tabs({
  26.     activate: function(event, ui) {
  27.         if (ui.newPanel.hasClass("gmap3")) {
  28.             ui.newPanel.gmap3({trigger: "resize"});
  29.         }
  30.     }
  31. });
BESbswy
BESbswy