fredyounan
9/12/2014 - 3:28 AM

GoogleMap

        var map, map1, map2, map3; // map variables should be global
        function initialize() {

            // Create an array of styles.
            var styles = [
                {
                    featureType: "landscape",
                    elementType: "all",
                    stylers: [
                          { color: "#F7F3F3" }
                ]
                },    
                {
                    featureType: "all",
                    elementType: "all",
                    stylers: [
                          { saturation: -20}
                    ]
                },
                {
                featureType: "road.arterial",
                elementType: "geometry",
                stylers: [
                      
                      { visibility: "simplified" },
                      { color: '#E4E2E2' },
                      { wight: 1.6 }
                ]
                },
                {
                    featureType: "road.local",
                    elementType: "geometry",
                    stylers: [

                          { visibility: "simplified" },
                          { color: '#ffffff' },
                          { wight: 1.6 }
                    ]
                },
                {
                    featureType: "road.highway",
                    elementType: "geometry",
                    stylers: [
                      
                      { visibility: "simplified" },
                      { color: '#BDBDBD' },
                      { wight: 1.6 }
                  ]
              }, {
                  featureType: "poi",
                  elementType: "labels",
                  stylers: [
                    { visibility: "off" }
                  ]
              }
            ];

            var styledMap = new google.maps.StyledMapType(styles, { name: "Styled Map" });

            // Create a map object, and include the MapTypeId to add
            // to the map type control.
            var mapOptions = {
                zoom: 13,
                center: new google.maps.LatLng(40.773938, -73.972602),
                // control button states
                // control buttons are boolean (true or false)
                panControl: false,
                zoomControl: false,
                mapTypeControl: true,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false,
                mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                }
            };
            
            // create map here
            map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

            //Associate the styled map with the MapTypeId and set it to display.
            map.mapTypes.set('map_style', styledMap);
            map.setMapTypeId('map_style');

            // these are tab controls
            $('#tab_map1').on('shown', function (e) {
                if (map1 == undefined) {
                    map1 = new google.maps.Map(document.getElementById('googleMap1'), mapOptions);
                    map1.mapTypes.set('map_style', styledMap);
                    map1.setMapTypeId('map_style');
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(40.773938, -72.972602),
                        map: map1,
                        title: 'Hello World!'
                    });
                }
            });


            $('#tab_map2').on('shown', function (e) {
                if (map2 == undefined) {
                    map2 = new google.maps.Map(document.getElementById('googleMap2'), mapOptions);
                    map2.mapTypes.set('map_style', styledMap);
                    map2.setMapTypeId('map_style');
                }
            });
            
            $('#tab_map3').on('shown', function (e) {
                if (map3 == undefined) {
                    map3 = new google.maps.Map(document.getElementById('googleMap3'), mapOptions);
                    map3.mapTypes.set('map_style', styledMap);
                    map3.setMapTypeId('map_style');
                }
            });

            // set a marker
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(40.773938, -73.972602),
                map: map,
                title: 'Hello World!'
            });
        }

        // initialize map
        google.maps.event.addDomListener(window, 'load', initialize);