This page requires a Javascript enabled browser
<< Back | Main Menu | FAQ | [?]

Bing/Google Maps

Add interactive Google Maps/Bing Maps within minutes.

CSS/JS files (add code to <HEAD> section):

?
1
2
3
4
5
6
7
<!-- DC Maps CSS -->
<link rel="stylesheet" type="text/css" href="dcodes/maps/css/dc_maps.css" />
<!-- jQuery Library (skip this step if already called on page ) -->
<script type="text/javascript" src="dcodes/jquery.min.js"></script> <!-- (do not call twice) -->
<!-- DC Maps JS -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="dcodes/maps/js/dc_maps.js"></script>

Embed Google Maps (Added Text Overlay + jQuery)

Options: "Find us here!" text + 100% width + no margin

View code:

?
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
<!-- DC Maps Settings -->
<script type="text/javascript">
    var map;
    $(document).ready(function () {
        map = new GMaps({
            el: '#gmap_with_overlay', // map name
            lat: 37.422014, // latitude and longitude coordinates of address
            lng: -122.08397, // how to obtain lat+long: http://support.google.com/maps/bin/answer.py?hl=en&answer=18539
            mapType: 'Roadmap', // Define map type: 'Hybrid', 'Roadmap', 'Satellite' or 'Terrain'
            zoom: 16, // zoom level, higher is closer
            zoomControl: true, // show zoom in/out controls
            zoomControlOpt: {
                style: 'SMALL', // small or large zoom controls
            },
            panControl: true, // show panning control knob
            streetViewControl: true, // enable streetview features
            mapTypeControl: true // allow user to change map types (e.g. from roadmap to satellite)
        });
        map.drawOverlay({
            lat: map.getCenter().lat(),
            lng: map.getCenter().lng(),
            layer: 'overlayLayer',
            content: '<div class="overlay">Find us here!<div class="overlay_arrow above"></div></div>', // add custom message here
            verticalAlign: 'top', // top, center, left, right
            horizontalAlign: 'center' // top, center, left, right
        });
    });
</script>
<!-- Display DC Google Map -->
<div id="gmap_with_overlay" style="width:100%;margin:0px;"></div>

Embed Google Maps (Added Markers + jQuery)

Hybrid view enabled. Click on red markers for example custom messages.

View code:

?
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
<!-- DC Maps Settings -->
<script type="text/javascript">
    var map;
    $(document).ready(function () {
        map = new GMaps({
            el: '#gmap_with_markers', // map name
            lat: 37.422014, // latitude and longitude coordinates of address
            lng: -122.08397, // how to obtain lat+long: http://support.google.com/maps/bin/answer.py?hl=en&answer=18539
            mapType: 'Hybrid', // Define map type: 'Hybrid', 'Roadmap', 'Satellite' or 'Terrain'
            zoom: 18, // zoom level, higher is closer
            zoomControl: true, // show zoom in/out controls
            zoomControlOpt: {
                style: 'SMALL', // small or large zoom controls
            },
            panControl: true, // show panning control knob
            streetViewControl: true, // enable streetview features
            mapTypeControl: true // allow user to change map types (e.g. from roadmap to satellite)
        });
        map.addMarker({
            lat: 37.422014, // latitude and longitude coordinates of first marker
            lng: -122.08397,
            title: 'Click Me Now', // title of marker
            details: {
                database_id: 42,
                author: 'dCodes'
            },
            click: function (e) {
                if (console.log) console.log(e);
                alert('This is an example of a custom marker placed on the map with just lat+long coordinates. ' + '\n' + 'You could use it to describe certain points of interest, for example this is the Google HQ!'); // define message here
            },
            mouseover: function (e) {
                if (console.log) console.log(e);
            }
        });
        map.addMarker({
            lat: 37.422014, // latitude and longitude coordinates of second marker
            lng: -122.08450,
            title: 'Our Office HQ', // title of marker
            infoWindow: {
                content: '<strong>Our Office Address:</strong><br /> 1 Google Drive, Mountain View, CA, USA <br />Hours: Mon-Fri 9am to 5.30pm. <br /><br /><a href="#">Follow us on Twitter</a><br /><br />- put any HTML content you want here!<br />' // define html content here
            }
        });
    });
</script>
<!-- Display Google Map -->
<div id="gmap_with_markers"></div>

Embed Google Maps (Minimalist + Standard + jQuery)

View code:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- DC Maps Settings -->
<script type="text/javascript">
    var map;
    $(document).ready(function () {
        map = new GMaps({
            el: '#gmap_standard', // map name
            lat: 47.644693, // latitude and longitude coordinates of address
            lng: -122.13015, // how to obtain lat+long: http://support.google.com/maps/bin/answer.py?hl=en&answer=18539
            mapType: 'Roadmap', // Define map type: 'Hybrid', 'Roadmap', 'Satellite' or 'Terrain'
            zoom: 16, // zoom level, higher is closer
            zoomControl: true, // show zoom in/out controls
            zoomControlOpt: {
                style: 'SMALL', // small or large zoom controls
                position: 'TOP_LEFT' // position
            },
            panControl: false, // show panning control knob
            streetViewControl: false, // enable streetview features
            mapTypeControl: false, // allow user to change map types (e.g. from roadmap to satellite)
            overviewMapControl: false // show small map overview box
        });
    });
</script>
<!-- Display Google Map -->
<div id="gmap_standard"></div>

Embed Google Maps (Styled Maps + jQuery)

View code:

?
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
<!-- DC Maps Settings -->
<script type="text/javascript">
    $(function () {
        var map = new GMaps({
            el: "#gmap_styled", // map name
            lat: 38.870779, // latitude and longitude coordinates of address
            lng: -77.055734, // how to obtain lat+long: http://support.google.com/maps/bin/answer.py?hl=en&answer=18539
            mapType: 'Roadmap', // Define map type: 'Hybrid', 'Roadmap', 'Satellite' or 'Terrain'
            zoom: 15, // zoom level, higher is closer
            zoomControl: true,
            zoomControlOpt: {
                style: "SMALL", // small or large zoom controls
                position: "TOP_LEFT" // position
            },
            panControl: true, // show panning control knob
            streetViewControl: false, // enable streetview features
            mapTypeControl: false, // allow user to change map types (e.g. from roadmap to satellite)
            overviewMapControl: false // show small map overview box
        });
        var styles = [{
            stylers: [{
                hue: "#00ffe6"
            }, // custom color styles
            {
                saturation: -20
            }]
        }, {
            featureType: "road",
            elementType: "geometry",
            stylers: [{
                lightness: 100
            }, {
                visibility: "simplified"
            }]
        }, {
            featureType: "road",
            elementType: "labels",
            stylers: [{
                visibility: "off"
            }]
        }];
        map.addStyle({
            styledMapName: "Styled Map",
            styles: styles,
            mapTypeId: "map_style"
        });
        map.setStyle("map_style");
    });
</script>
<!-- Display Google Map -->
<div id="gmap_styled"></div>

Embed Google Maps (IFRAME/Direct Embed)

View code:

?
1
2
3
4
5
6
7
8
9
10
11
<!-- DC Embed Google Maps Start -->
<iframe width="550" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=Statue of Liberty, Liberty Island, New York, NY 10004, USA&layer=tc&t=m&z=18&source=embed&output=svembed"></iframe>
<!-- DC Embed Google Maps End -->
Parameters:
---------------------
q= enter full address here or latitude+longitude e.g. (street name, city, county/state, country)
layer= (t = traffic | c = streetview | tc = both) - show map layer type
t= (m = normal map | k = satellite | h = hybrid | p = terrain) - Sets the kind of map shown
z= (1 - 23) - map zoom level. 23 value indicates fully zoomed in. (default is 18)
width= (value) - height of gmaps
height= (value) - width of gmaps

Embed Bing Maps (IFRAME/Direct Embed)

View code:

?
1
2
3
4
To embed Bing Maps, goto http://www.bing.com/maps/
1) Enter Address
2) Select "Share" (top right)
3) Embed <iframe> code into your page


© TemplateAccess