Full service web hosting, great prices and support. Starts at $1.99/month!
Results 1 to 3 of 3

Thread: GoogleMaps On your osCmax website

  1. #1
    Schaboo
    Guest


    2 out of 2 members found this post helpful.

    Default GoogleMaps On your osCmax website

    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
    Last edited by Schaboo; 03-17-2010 at 03:49 AM.

  2. #2
    niallb
    Guest


    Default Re: GoogleMaps On your website

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


    Niall

  3. #3
    Schaboo
    Guest


    Default Re: GoogleMaps On your website

    Yep, you can do it this way too.

Similar Threads

  1. Any osCmax templates availble on website
    By Sean Bradley in forum osCmax v2 Installation issues
    Replies: 19
    Last Post: 05-28-2011, 10:19 PM
  2. GoogleMaps On your osCmax website
    By Schaboo in forum osCommerce 2.2 Discussion
    Replies: 2
    Last Post: 03-04-2011, 02:20 AM
  3. my website redirect to wyciwyg://41/http://www.website.com
    By saad_sinpk in forum osCommerce 2.2 Modification Help
    Replies: 0
    Last Post: 01-31-2011, 01:15 PM
  4. Replies: 1
    Last Post: 02-18-2009, 06:51 PM
  5. which add-on under this website?
    By laonux in forum osCommerce 2.2 Modification Help
    Replies: 1
    Last Post: 08-26-2003, 08:34 PM

Bookmarks

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •