Map Channels Map Channels
• Free Mapping and Navigation Tools
• Embed a Google Map into your Website or Blog Without Coding
Home About Contact News Site Map Links Markers API Key Geocoder Custom Coding Donate
Dual Maps   Route Maps   Local Maps   Treasure Maps   Autocomplete Maps   Video Maps
    Map Channels version 6         Map Channels version 5       Map Channels version 4  

Venue Maps

Venue Maps is a project to display maps and street view for any location. Users who sign in with their Google accounts can save places from a Venue Map to view later on the main Google Maps site and mobile apps.

The code originated on Map Channels Events and Map Channels Hotels to map venue and hotel locations.

Venue Maps provide two maps at different zoom levels plus a street view where this is available. There are options to configure the appearance of the maps and street view and also to select specific street view co-ordinates, heading, pitch and zoom.

Venue Maps can be easily added to your web page by following the instructions below. All code is inline and no adverts are displayed.

The default example map features the American Airlines Arena in Miami, FL.

View this example for a demonstration of Multiple Venue Maps on the same page.

 

Similar projects available on this site include Dual Maps, Local Maps and Location Maps.

If you find Venue Maps useful please link back to Map Channels on your site and consider making a Donation to support development of future projects.


The Venue Map code includes the new Google Maps signed in feature which allows users to save the placemark location and URL. This feature is a great way for visitors to bookmark your placemark location and website in one go and to return later via another Google Map.

The format for Venue Maps is different to most other Map Channels projects. Rather than using a small section of iframe code, Venue Maps provides the full source code required to implement the map inline on your web page without any adverts. Inline display of the map is the best approach since the street view section is not always displayed and can be hidden by the user.

It is recommended to log in to Map Channels before creating a Venue Map so that your map settings will be saved for future reference. The settings for the most recent map created are saved for each user.

The code is provided with an open source Apache licence. Please include a link to Map Channels on the page where the map is displayed. A Map Channels link is helpful for us to attract more visitors and also for you as a bookmark if updates are made to the code.


Venue Map Preview

Venue Maps by Map Channels


Venue Map Settings

Dimensions

Width px    Should be at least 300 px
Height px    Should be at least 200 px
Margin px

Map Options

Map Title
Get Directions Link
Facing   
When the local map shows oblique imagery, the current facing direction (North, South, East or West) is displayed above the map.

Place

Place Name
Link URL    The link URL saved with the marker if it is saved to Google Maps
Link Title    The link title saved with the marker if it is saved to Google Maps
Marker URL    see the Markers page for some examples
 

Location

Latitude
Longitude

Use the search box opposite to find a specific place by name and/or address.
Drag and drop the red marker on the map opposite to adjust the latitude and longitude.



These values are set by moving the pegman marker on the map opposite.
Drag and drop the pegman marker to fine tune the position.

Street View Latitude
Street View Longitude
Street View Heading
Street View Pitch
Street View Zoom

Enable Street View
Make Pegman Visible   
The local map will be zoomed out until the pegman is visible
 
Street View Styling Options
Street View Pan Control
Street View Zoom Control
Street View Address Control
Street View Links Control

Region Map

Zoom Level
Map Type
Scale Control
Mouse Wheel Scroll

Local Map

Zoom Level
Map Type
Scale Control
Mouse Wheel Scroll



Venue Map Script

To embed your Local Map copy and paste this HTML code to your web page:


1. Add this script into the <header> section of the page

<script type="text/javascript" src="http://maps.google.com/maps/api/js?signed_in=true&sensor=false&libraries=geometry"></script>
<script type="text/javascript">
    function loadPage()
    {
        // Your parameters here
       var venueInfo =
       {
           container: "venuemap",

           directions: true,
           facing: true,

           width: 476,
           height: 360,
           margin: 8,

           mapTitle: "Example Venue Map",
           placeName: "American Airlines Arena",

           lat: 25.781430,
           lng: -80.188610,
           linkURL: "http://www.mapchannels.com/VenueMaps.aspx",
           linkTitle: "Map Channels",

           markerURL: "http://maps.google.com/mapfiles/ms/micons/red-dot.png",

           regionMapZoomLevel: 10,
           regionMapType: "roadmap",
           regionMapScale: true,
           regionMapScroll: false,

           localMapZoomLevel: 18,
           localMapType: "hybrid",
           localMapScale: false,
           localMapScroll: false,

           streetviewEnable: true,
           streetviewPegmanVisible: false,

           streetviewLat: 25.781720,
           streetviewLng: -80.189250,
           streetviewHeading: 106.531,
           streetviewPitch: 0.496,
           streetviewZoom: 1.000,

           streetviewPanControl: true,
           streetviewZoomControl: true,
           streetviewAddressControl: true,
           streetviewLinksControl: true
       };

       // create the venue map
       var venuemap = new VenueMap(venueInfo);

       loadEditorPage(venueInfo);
}

        /*         * Venue Maps version 1.0         *         * Copyright 2014 Map Channels (http://www.mapchannels.com)         *         * The latest version of this code is located at http://www.mapchannels.com/VenueMaps.aspx         *         * Licensed under the Apache License, Version 2.0 (the "License");         * you may not use this file except in compliance with the License.         * You may obtain a copy of the License at         *          *       http://www.apache.org/licenses/LICENSE-2.0         *         * Unless required by applicable law or agreed to in writing, software         * distributed under the License is distributed on an "AS IS" BASIS,         * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.         * See the License for the specific language governing permissions and         * limitations under the License.         *         */

        function VenueMap(a)
        {
            // main map and street view objects
            var regionMap = null;
            var localMap = null;
            var pan = null;

            var regionMarker = null;
            var localMarker = null;

            var width = 400;
            var height = 300;
            var margin = 8;

            var directions = true;
            var facing = true;

            // default properties, replaced by user supplied values
            var mapTitle = "Template Venue Map";
            var placeName = "Template Placemark";
            var linkURL = "http://www.mapchannels.com/VenueMaps.aspx"; 
            var linkTitle = "Map Channels"; 
            var markerURL = "http://maps.google.com/mapfiles/ms/micons/red-dot.png";

            var lat = 40.758688;
            var lng = -73.985214;

            var streetviewEnable = false;
            var streetviewPegmanVisible = false;
            var streetviewAuto = false;

            // optional street view properties, if these are not supplied then the nearest street view is displayed (where available)
            var streetviewLng = 0;
            var streetviewLat = 0;
            var streetviewHeading = 0;
            var streetviewPitch = 0;
            var streetviewZoom = 0;

            var streetviewPanControl = true;
            var streetviewZoomControl = true;
            var streetviewAddressControl = true;
            var streetviewLinksControl = true;

            var container = "venuemap"; // the id of the div used to display the venue map

            var regionMapZoomLevel = 10;
            var regionMapType = "roadmap";
            var regionMapScale = true;
            var regionMapScroll = false;

            var localMapZoomLevel = 18;
            var localMapType = "hybrid";
            var localMapScale = true;
            var localMapScroll = false;

            var regionMapWidth = 400;
            var localMapWidth = 400;
            var margin = 4;
            var mapHeight = 300;
            var panHeight = 300;

            function initConfig(a)
            {
                if (typeof (a.container) != "undefined") { container = a.container; }

                if (typeof (a.width) != "undefined") { width = a.width; }
                if (typeof (a.height) != "undefined") { height = a.height; }
                if (typeof (a.margin) != "undefined") { margin = a.margin; }

                if (typeof (a.directions) != "undefined") { directions = a.directions; }
                if (typeof (a.facing) != "undefined") { facing = a.facing; }

                if (typeof (a.mapTitle) != "undefined") { mapTitle = a.mapTitle; }
                if (typeof (a.placeName) != "undefined") { placeName = a.placeName; }

                if (typeof (a.lat) != "undefined" && typeof (a.lng) != "undefined")
                {
                    lat = a.lat;
                    lng = a.lng;
                }

                if (typeof (a.linkURL) != "undefined") { linkURL = a.linkURL; }
                if (typeof (a.linkTitle) != "undefined") { linkTitle = a.linkTitle; }

                if (typeof (a.streetviewEnable) != "undefined") { streetviewEnable = a.streetviewEnable; }
                if (typeof (a.streetviewPegmanVisible) != "undefined") { streetviewPegmanVisible = a.streetviewPegmanVisible; }
                
                if (typeof (a.streetviewLat) != "undefined" && typeof (a.streetviewLng) != "undefined")
                {
                    streetviewLat = a.streetviewLat;
                    streetviewLng = a.streetviewLng;
                }
                
                if (streetviewLat == 0 && streetviewLng == 0)
                {
                    streetviewAuto = true;
                }

                if (typeof (a.streetviewHeading) != "undefined") { streetviewHeading = a.streetviewHeading; }
                if (typeof (a.streetviewPitch) != "undefined") { streetviewPitch = a.streetviewPitch; }
                if (typeof (a.streetviewZoom) != "undefined") { streetviewZoom = a.streetviewZoom; }

                if (typeof (a.streetviewPanControl) != "undefined") { streetviewPanControl = a.streetviewPanControl; }
                if (typeof (a.streetviewZoomControl) != "undefined") { streetviewZoomControl = a.streetviewZoomControl; }
                if (typeof (a.streetviewAddressControl) != "undefined") { streetviewAddressControl = a.streetviewAddressControl; }
                if (typeof (a.streetviewLinksControl) != "undefined") { streetviewLinksControl = a.streetviewLinksControl; }

                if (typeof (a.markerURL) != "undefined") { markerURL = a.markerURL; }

                if (typeof (a.regionMapZoomLevel) != "undefined") { regionMapZoomLevel = a.regionMapZoomLevel }
                if (typeof (a.regionMapType) != "undefined") { regionMapType = a.regionMapType }
                if (typeof (a.regionMapScale) != "undefined") { regionMapScale = a.regionMapScale }
                if (typeof (a.regionMapScroll) != "undefined") { regionMapScroll = a.regionMapScroll }

                if (typeof (a.localMapZoomLevel) != "undefined") { localMapZoomLevel = a.localMapZoomLevel }
                if (typeof (a.localMapType) != "undefined") { localMapType = a.localMapType }
                if (typeof (a.localMapScale) != "undefined") { localMapScale = a.localMapScale }
                if (typeof (a.localMapScroll) != "undefined") { localMapScroll = a.localMapScroll }
            }

            initConfig(a);

            var pt = new google.maps.LatLng(lat, lng);

            var titleContainer = container + "_title";
            var facingContainer = container + "_facing";
            var regionMapContainer = container + "_regionmap";
            var localMapContainer = container + "_localmap";
            var panContainer = container + "_pan";

            // map objects and services
            var streetViewService = new google.maps.StreetViewService();
            var infoWindow = new google.maps.InfoWindow();
            var regionMarker = null;
            var localMarker = null;

            // counter to prevent multiple events from being fired
            var markerClicked = 2;

            // functions
            function eid(id)
            {
                return document.getElementById(id);
            }

            function glog(a)
            {
                if (typeof (console) != "undefined" && console && console.log)
                {
                    console.log(a);
                }
            }

            function getMapTypeId(a)
            {
                var mapTypeId = google.maps.MapTypeId.ROADMAP;
                switch (a)
                {
                    case "satellite": mapTypeId = google.maps.MapTypeId.SATELLITE; break;
                    case "hybrid": mapTypeId = google.maps.MapTypeId.HYBRID; break;
                    case "terrain": mapTypeId = google.maps.MapTypeId.TERRAIN; break;
                }

                return mapTypeId;
            }

            // creates the HTML within the main container within which component controls are displayed
            function initLayout()
            {
                var directionsLink = "http://maps.google.com/maps?daddr=" + lat + "," + lng + "+(" + placeName.replace("&", " ") + ") ";

                var directionsHTML = "";
                if (directions)
                {
                    directionsHTML = "<a target='_blank' href='" + directionsLink + "' title='Get Directions' style='color:blue'>Get Directions</a>"; 
                }

                var panWidth = width * 2 + margin;
                var panHTML = "";
                if (streetviewEnable)
                {
                    panHTML =
                        "<tr style='height:" + margin + "px'><td></td></tr>" +
                        "<tr><td colspan='3'><div id='" + panContainer + "' style='display:none;width:" + panWidth + "px; height:" + height + "px'></td></tr>";
                }

                var halfWidth = parseInt(width / 2);

                eid(container).innerHTML =
                    "<table cellspacing='0' cellpadding='0' style='text-align:left;width:" + panWidth + "px'><tr><td style='width:" + width + "px'>" +
                    "<span id='" + titleContainer + "'>" + mapTitle + "</span>" +
                    "</td><td style='width:" + margin + "px'>" +
                    "</td><td style='width:" + halfWidth + "px'>" +
                    "<span id='" + facingContainer + "' style='color:gray'></span>" +
                    "</td><td style='width:" + (width - halfWidth) + "px;text-align:right'>" +
                    directionsHTML +
                    "</tdf></tr><tr style='height:" + margin + "px'><td>" +
                    "</td></tr></table>" +
                    "<table cellspacing='0' cellpadding='0'><tr><td><div id='" + regionMapContainer + "' style='width:" + width + "px; height:" + height + "px'></div>" +
                    "</td><td style='width:" + margin + "px'>" +
                    "</td><td>" +
                    "<div id='" + localMapContainer + "' style='width:" + width + "px; height:" + height + "px'></div></td></tr>" +
                    panHTML +
                    "</table>";

            }

            // create the regional level map in the top left corner
            function initRegionMap()
            {
                var regionMapOptions =
                {
                    center: pt,
                    zoom: regionMapZoomLevel,
                    mapTypeId: getMapTypeId(regionMapType),
                    streetViewControl: false,
                    scaleControl: regionMapScale,
                    scrollwheel:  regionMapScroll
                };

                regionMap = new google.maps.Map(eid(regionMapContainer), regionMapOptions);

                google.maps.event.addListener(regionMap, "click", function ()
                {
                    closeInfoWindow();
                });

                regionMarker = createMarker(regionMap);
                showInfoWindow();
            }

            // create the local level map in the top right corner
            function initLocalMap()
            {
                var localMapOptions =
                {
                    center: pt,
                    zoom: localMapZoomLevel,
                    tilt: 45,
                    heading: streetviewHeading,
                    mapTypeId: getMapTypeId(localMapType),
                    scaleControl: localMapScale,                    
                    scrollwheel: localMapScroll
                };

                if (streetviewEnable)
                {
                    localMapOptions.streetView = pan;
                }

                localMap = new google.maps.Map(eid(localMapContainer), localMapOptions);

                // direction of view change event handler (used when map view is tilted)
                google.maps.event.addListener(localMap, 'idle', function ()
                {
                    displayFacing();
                });

                localMarker = createMarker(localMap);

                makePegmanVisible();
            }

            function displayFacing()
            {
                var tilt = localMap.getTilt();
                var heading = localMap.getHeading();

                var facingText = "";

                if (tilt != 0)
                {
                    var direction = parseInt((heading + 45) / 90);
                    switch (direction)
                    {
                        case 0: facingText = "Facing North"; break;
                        case 1: facingText = "Facing East"; break;
                        case 2: facingText = "Facing South"; break;
                        case 3: facingText = "Facing West"; break;
                    }
                }

                eid(facingContainer).innerHTML = facingText;
            }

            function makePegmanVisible()
            {
                if (streetviewPegmanVisible &&localMap )
                {
                    var visible = false;
                    var zoom = localMap.getZoom();
                    streetPt = pan.getPosition();

                    bounds = localMap.getBounds();

                    if (bounds)
                    {
                        while (zoom > 1 && !visible)
                        {
                            bounds = localMap.getBounds();

                            if (bounds.contains(streetPt))
                            {
                                visible = true;
                            }
                            else
                            {
                                zoom--;
                                localMap.setZoom(zoom);
                            }
                        }
                    }
                }
            }

            // creates a place marker on one of the maps (supplied as the map parameter)
            function createMarker(map)
            {
                // place information (location and name) for used by the Google signed-in bookmarking service
                var placeInfo =
                {
                    placeId: null,
                    location: pt,
                    query: placeName
                };

                // Add Marker Attribution Information
                var attributionInfo =
                {
                    source: linkTitle,
                    webUrl: linkURL
                };

                var markerOptions =
                {
                    position: pt,
                    map: map,
                    icon: markerURL,
                    title: name,
                    place: placeInfo,
                    attribution: attributionInfo
                };

                var marker = new google.maps.Marker(markerOptions);

                google.maps.event.addListener(marker, "click", function ()
                {
                    // when a marker is cliced show the street view (if it was previously hidden) and display and info windo on the regional map
                    markerClicked = 2;
                    showNearestStreetView();
                    showInfoWindow();
                });

                return marker;
            }

            // Create the Street View Panorama beneath the 2 maps
            function initPanorama()
            {
                var visible = false;
                var panDiv = eid(panContainer);
                var streetPt = null;

                var panOptions =
                {
                    enableCloseButton: true,
                    scrollwheel: false,
                    panControl: streetviewPanControl,
                    zoomControl: streetviewZoomControl,
                    addressControl: streetviewAddressControl,
                    linksControl: streetviewLinksControl
                };

                if (streetviewLat || streetviewLng)
                {
                    var streetPt = new google.maps.LatLng(streetviewLat, streetviewLng);

                    // apply minimum streetview zoom level (default : 1)
                    if (streetviewZoom < 1)
                    {
                        streetviewZoom = 1;
                    }

                    panOptions.position = streetPt;
                    panOptions.pov =
                    {
                        heading: streetviewHeading,
                        pitch: streetviewPitch,
                        zoom: streetviewZoom
                    };

                    panDiv.style.display = "block";
                    visible = true;

                    // eid(titleContainer).innerHTML = "Google Map and Street View";
                }
                else
                {
                    panOptions.visible = false;
                }

                pan = new google.maps.StreetViewPanorama(panDiv, panOptions);

                // event handler to hide the container when the street view close button is clicked
                google.maps.event.addListener(pan, 'visible_changed', function ()
                {
                    panDiv.style.display = pan.getVisible() ? "block" : "none";
                });

                // event handler to re-centre the local map when the street view lat lng changes
                google.maps.event.addListener(pan, 'position_changed', function ()
                {
                    streetPt = pan.getPosition();
                    if (localMap && markerClicked == 0)
                    {
                        localMap.setCenter(pt);
                    }

                    if (markerClicked)
                    {
                        markerClicked--;
                    }

                    makePegmanVisible();
                });

                // if a street view location has not been preset attempt to find the nearest available streetview
                if (!streetPt )
                {
                    showNearestStreetView();
                }

                mapComplete();

            }

            // attempt to find a nearby panorama for the supplied lat lng
            function showNearestStreetView()
            {
                if (localMap)
                {
                    localMap.setCenter(pt);
                    localMap.setZoom(localMapZoomLevel);
                }

                if (streetviewEnable)
                {
                    streetViewService.getPanoramaByLocation(pt, 50, function (data, status)
                    {
                        if (status == google.maps.StreetViewStatus.OK && data.location)
                        {
                            // var titleDiv = eid(titleContainer);
                            var panDiv = eid(panContainer);

                            // titleDiv.style.color = "gray";
                            // titleDiv.innerHTML = "Google Map and Nearby Street View";

                            var streetPt = data.location.latLng;
                            var streetHeading = google.maps.geometry.spherical.computeHeading(streetPt, pt);

                            panDiv.style.display = "block";
                            pan.setVisible(true);
                            pan.setPosition(streetPt);
                            pan.setPov({ heading: streetHeading, pitch: 0, zoom: 1 });

                            makePegmanVisible();
                        }
                    });
                }

            }

            // displays an info window in the regional map, which includes the Google Map bookmark link 
            function showInfoWindow()
            {
                var infoWidth = 290;
                if (infoWidth + 30 > width)
                {
                    infoWidth = width - 30;
                }
                infoWindow.setContent("<div style='width:" + infoWidth + "px'>" + placeName + "</div>");
                infoWindow.open(regionMap, regionMarker);
            }


            function closeInfoWindow()
            {
                infoWindow.close();
            }


            // once map and streetview have been created remove the height property from the container div
            function mapComplete()
            {
                eid(container).style.height = null;
            }

            // initialize the venue map
            initLayout();
            initRegionMap();

            if (streetviewEnable)
            {
                initPanorama();
            }

            initLocalMap();
        }

        google.maps.event.addDomListener(window, 'load', loadPage);
</script>

2. Add this script into the <body> section of the page

<div id='venuemap' style='height:786px;px'></div>
<p><a href='http://www.mapchannels.com/VenueMaps.aspx' target='_blank' style='color:gray;text-decoration:underline;font-size:small'>Venue Maps by Map Channels</a></p>

You can make further modifications as required to the map code. e.g. add a 'loading map' message into the venuemap div, display additional layers, etc.






 

 • Open Tour Map  • Team Maps  • Map Channels Events  • Map Channels Hotels  • TripGeo  • Street Cities  • My Maps Plus (c) www.mapchannels.com, 2007-2017   Terms