GoogleMaps On your osCmax website

**Schaboo** · 03-16-2010, 06:55 AM

Hi,
I was setting up new shop for my customer and I've been asked to put a google maps on contact us page so people would be able to see where the shop is. I've been looking for contribution with google maps and I couldn't find it so build it myself

All you will have to do is create a new file: YOUR_FILE_NAME.htm wit code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1 " />
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR API KEY " type="text/javascript"></script>

    <script type="text/javascript">
        var map = null;
        var contextmenu;
        var mapDivCtrl = null;
        var dvStreetViewMap = null;
        var dvClose = null;
        var mapDiv = null;
        var clickedPixel = null;
        var point;
        function load(loc) {
            if (GBrowserIsCompatible()) {

                mapDiv = "map";
                map = new GMap2(document.getElementById(mapDiv));

                map.addControl(new GOverviewMapControl());
                map.enableDoubleClickZoom();
                map.enableScrollWheelZoom();
                map.addControl(new GMapTypeControl());
                map.addControl(new GLargeMapControl());
                createContextMenu(map);
                point = new GLatLng(11.611129, -2.794844);
                var address = 'Hamilton Products<br> Unit 1 Ind. Units <br>YOUR SHOP ADDRESS <br>Click <a href="javascript:showPanorama();"> Here to see StreetView</a><br><br/>';
                var marker = new GMarker(point);
                map.setCenter(point, 17);
                map.addOverlay(marker);
                map.setMapType(G_HYBRID_MAP);
                GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(address); });
                marker.openInfoWindowHtml(address);

            }
        }
        function createOverLayStreetDiv() {
            //overlay
            var dv = document.createElement('div');
            var l = 0, t = 0, w = 0, h = 0;
            var temp = mapDivCtrl;
            while (temp) {
                l += temp.offsetLeft;
                t += temp.offsetTop;
                temp = temp.offsetParent;
            }
            w = mapDivCtrl.clientWidth;
            h = mapDivCtrl.clientHeight;
            with (dv) {
                style.position = 'absolute';
                style.left = l + 'px';
                style.top = t + 'px';
                style.width = w + 'px';
                style.height = h + 'px';
                style.zIndex = 100000;
                style.backgroundColor = '#FFFFFF';
                style.display = '';
            }
            document.body.appendChild(dv);

            var closeDiv = document.createElement('div');
            closeDiv.className = 'close';
            closeDiv.style.left = (w - 35) + 'px';
        closeDiv.style.top = (t + 4) + 'px';
            closeDiv.onclick = function() {
                street.remove();
                dvStreetViewMap.style.display = 'none';
                document.body.removeChild(dvStreetViewMap);
                dvClose.style.display = 'none';
                document.body.removeChild(dvClose);
            };
            closeDiv.onmouseover = function() {
                this.className = 'close-hover';
            };
            closeDiv.onmouseout = function() {
                this.className = 'close';
            };
            document.body.appendChild(closeDiv);

            dvStreetViewMap = dv;
            dvClose = closeDiv;
        }

        function showPanorama() {
            if (clickedPixel)
                var position = map.fromContainerPixelToLatLng(clickedPixel)
            else
                var position = point;
            mapDivCtrl = document.getElementById('map');
            contextmenu.style.visibility = "hidden";
            createOverLayStreetDiv();
            var opt = { latlng: position, enableFullScreen: true };
            street = new GStreetviewPanorama(dvStreetViewMap, opt);
            GEvent.addListener(dvStreetViewMap, "error", handlePanoramaError);
        }
        function handlePanoramaError(errorCode) {
            if (errorCode == FLASH_UNAVAILABLE) {
                alert("Error: Flash doesn't appear to be supported by your browser");
            }
            else if (errorCode == NO_NEARBY_PANO) {
                alert("Error : StreetView is Unavailable for current location");
            }
            return;
        }
        function createContextMenu(map) {
            contextmenu = document.createElement("div");
            contextmenu.style.visibility = "hidden";
            contextmenu.style.background = "#ffffff";
            contextmenu.style.border = "1px solid #8888FF";

            contextmenu.innerHTML = '<a href="javascript:zoomIn()"><div class="context">&nbsp;&nbsp;Zoom in&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:zoomOut()"><div class="context">&nbsp;&nbsp;Zoom out&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:zoomInHere()"><div class="context">&nbsp;&nbsp;Zoom in here&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:zoomOutHere()"><div class="context">&nbsp;&nbsp;Zoom out here&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:centreMapHere()"><div class="context">&nbsp;&nbsp;Centre map here&nbsp;&nbsp;</div></a>'
                            + '<a href="javascript:showPanorama()"><div class="context">&nbsp;&nbsp;Show Panorama here&nbsp;&nbsp;</div></a>';

            map.getContainer().appendChild(contextmenu);
            GEvent.addListener(map, "singlerightclick", function(pixel, tile) {
                clickedPixel = pixel;
                var x = pixel.x;
                var y = pixel.y;
                if (x > map.getSize().width - 120) {
                    x = map.getSize().width - 120
                }
                if (y > map.getSize().height - 100) {
                    y = map.getSize().height - 100
                }
                var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x, y));
                pos.apply(contextmenu);
                contextmenu.style.visibility = "visible";
            });
            GEvent.addListener(map, "click", function() {
                contextmenu.style.visibility = "hidden";
            });
        }
        function zoomIn() {
            map.zoomIn();
            contextmenu.style.visibility = "hidden";
        }
        function zoomOut() {
            map.zoomOut();
            contextmenu.style.visibility = "hidden";
        }
        function zoomInHere() {
            var point = map.fromContainerPixelToLatLng(clickedPixel)
            map.zoomIn(point, true);
            contextmenu.style.visibility = "hidden";
        }
        function zoomOutHere() {
            var point = map.fromContainerPixelToLatLng(clickedPixel)
            map.setCenter(point, map.getZoom() - 1);
            contextmenu.style.visibility = "hidden";
        }
        function centreMapHere() {
            var point = map.fromContainerPixelToLatLng(clickedPixel)
            map.setCenter(point);
            contextmenu.style.visibility = "hidden";
        }
   
   
    </script>
</head>

<body onload="load('1');" " onunload="GUnload()" >
    <div id="map" style="width: 570px; height: 500px; color:#000000; font-family:arial, sans serif">
    </div>
</body>

Then upload the file your /catalog folder.
After upload fo to templates/YOUR_TEMPLATE/content/
open file: contact_us.tpl.php
and on bottom of the file put:

PHP Code:


<div style="color:#ffffff;"><?php require ("YOR_FILE_NAME.htm");?></div>

then visit:
Sign Up for the Google Maps API - Google Maps API - Google Code
and get your API key to paste it in.
And enjoy.
Note: this code contains a link to streets view if your area is not covered with streets view option delete line :

Code:

Click <a href="javascript:showPanorama();"> Here to see StreetView</a>

Full package to download here

**niallb** · 03-03-2011, 10:26 AM

I just pasted the code Google Maps give you at the bottom of templates/compromise/content/contact_us.tpl.php after </table></form>

Niall

**Schaboo** · 03-04-2011, 02:20 AM

Yep, you can do it this way too.