Maps Shortcodes

An easy way to show maps on your website.


Full Width

HTML Shortcode

 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>

Full Width (Inside Container)


HTML Shortcode

 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>

HTML Shortcode

 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/0/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/0/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/0/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>

Custom Style

With Borders



HTML Shortcode

 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>

Inside Text

HTML Shortcode

 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>