1

<div style="height: 280px;" class="google-map mt-none mb-lg" id="googlemapsMarkers"></div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<script>
    $(document).ready(function () {
        // Markers
        $("#googlemapsMarkers").gMap({
            controls: {
                draggable: (($.browser.mobile) ? false : true),
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl: true
            },
            scrollwheel: false,
            markers: [{
                address: "217 Summit Boulevard, Birmingham, AL 35243",
                html: "<strong>Alabama Office</strong><br>217 Summit Boulevard, Birmingham, AL 35243",
                icon: {
                    image: "/portals/2/img/pin.png",
                    iconsize: [26, 46],
                    iconanchor: [12, 46]
                }
            }, {
                address: "645 E. Shaw Avenue, Fresno, CA 93710",
                html: "<strong>California Office</strong><br>645 E. Shaw Avenue, Fresno, CA 93710",
                icon: {
                    image: "/portals/2/img/pin.png",
                    iconsize: [26, 46],
                    iconanchor: [12, 46]
                }
            }, {
                address: "New York, NY 10017",
                html: "<strong>New York Office</strong><br>New York, NY 10017",
                icon: {
                    image: "/portals/2/img/pin.png",
                    iconsize: [26, 46],
                    iconanchor: [12, 46]
                }
            }],
            latitude: 37.09024,
            longitude: -95.71289,
            zoom: 3
        });
    });
</script>

1

<div style="height: 280px;" class="google-map mt-none mb-none" id="googlemapsControls"></div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<script>
    $(document).ready(function () {
        // Custom Controls
        $("#googlemapsControls").gMap({
            controls: {
                panControl: true,
                zoomControl: false,
                mapTypeControl: true,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false
            },
            scrollwheel: false,
            latitude: 37.09024,
            longitude: -95.71289,
            zoom: 3
        });
    });
</script>

1

<div class="google-map mt-none mb-lg" id="googlemapsStyle" style="height: 280px;"></div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<script>
    $(document).ready(function () {
        $("#googlemapsStyle").gMap({
            controls: {
                draggable: (($.browser.mobile) ? false : true),
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl: true
            },
            scrollwheel: false,
            latitude: 37.09024,
            longitude: -95.71289,
            zoom: 3
        });

        var mapRef = $("#googlemapsStyle").data('gMap.reference');

        // Create an array of styles.
        var mapColor = "#0088cc";

        var styles = [{
            stylers: [{
                hue: mapColor
            }]
        }, {
            featureType: "road",
            elementType: "geometry",
            stylers: [{
                lightness: 0
            }, {
                visibility: "simplified"
            }]
        }, {
            featureType: "road",
            elementType: "labels",
            stylers: [{
                visibility: "off"
            }]
        }];

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

        mapRef.mapTypes.set('map_style', styledMap);
        mapRef.setMapTypeId('map_style');
    });

</script>

1
2
3

<div class="google-map-borders">
      <div class="google-map mt-none mb-none" id="googlemapsBorders" style="height: 270px;"></div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<script>
$(document).ready(function () {
        $("#googlemapsBorders").gMap({
            controls: {
                draggable: (($.browser.mobile) ? false : true),
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: true,
                streetViewControl: true,
                overviewMapControl: true
            },
            scrollwheel: false,
            latitude: 37.09024,
            longitude: -95.71289,
            zoom: 3
        });
    });
</script>