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

<div class="google-map mt-none mb-none" id="googlemapsFullWidth"></div>
<script>
    // Full Width
    $(document).ready(function () {
        $("#googlemapsFullWidth").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: 4
        });
    });
</script>

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

<div style="height: 280px;" class="google-map mt-none mb-none" id="googlemapsFullWidthInside"></div>
<script>
    $(document).ready(function () {
        // Full Width (inside Container)
        $("#googlemapsFullWidthInside").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: 4
        });
    });
</script>

 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<div class="row">
    <div class="col-md-6">
        <h4>Markers</h4>
        <div style="height: 280px;" class="google-map mt-none mb-lg" id="googlemapsMarkers"></div>
    </div>
    <div class="col-md-6">
        <h4>Custom Controls</h4>
        <div style="height: 280px;" class="google-map mt-none mb-none" id="googlemapsControls"></div>
    </div>
</div>
<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/demo1/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/demo1/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/demo1/img/pin.png",
                    iconsize: [26, 46],
                    iconanchor: [12, 46]
                }
            }],
            latitude: 37.09024,
            longitude: -95.71289,
            zoom: 3
        });
        // 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
 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<div class="row">
    <div class="col-md-6">
        <h4>Custom Style</h4>
        <div style="height: 280px;" class="google-map mt-none mb-lg" id="googlemapsStyle"></div>
    </div>
    <div class="col-md-6">
        <h4>With Borders</h4>
        <div class="google-map-borders">
            <div style="height: 270px;" class="google-map mt-none mb-none" id="googlemapsBorders"></div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        // Custom Style
        $("#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');

        // Borders
        $("#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>

 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

<div class="row">
    <div class="col-md-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
        <div style="width: 280px;" class="pull-left mr-lg mb-sm">
            <div style="height: 220px;" class="google-map small mt-none mb-none" id="googlemapsInsideText"></div>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis. Consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In eu libero ligula. Fusce eget metus lorem, ac viverra leo. Nullam convallis, arcu vel pellentesque sodales, nisi est varius diam, ac ultrices sem ante quis sem. Proin ultricies volutpat sapien, nec scelerisque ligula mollis lobortis.</p>
    </div>
</div>
<script>
    $(document).ready(function () {
        // Inside Text
        $("#googlemapsInsideText").gMap({
            controls: {
                panControl: true,
                zoomControl: false,
                mapTypeControl: true,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false
            },
            markers: [{
                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]
                },
                popup: true
            }],
            scrollwheel: false,
            latitude: 40.75198,
            longitude: -73.96978,
            zoom: 12
        });
    });
</script>