Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Script alignment

    Hello everybody

    I have a question that might be very stupid, but I'm also very novice, and guess it is my destiny to ask questions of this kind

    So, I set up a google maps widget for my website, and am trying to center it on the page. By default it's aligned on the left

    Anyone know ?

    Thanks by advance

    Terence

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Hello supertiti,
    Hard to say what your trying to do without seeing your code. I also don't know what a map widget is...
    If you put it in a div you can sure center it though - margin: 0 auto; will do that.
    You could also give the image(widget?) a class and center that.

    Give us a link or paste your code in here to get more specific help if you want.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A google map widget is the implementation of the google maps API on a personal website, which makes your map searchable around

    I forgot to put the code in, but here it is. It has a key to google maps, but could work fine if you paste in a blank page :


    <!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" xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Google Maps</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAATmH4N4Jgl3Edrbp_Br4PjxSYC9tfrGJiOQP50RasO1vcjpBPDRR924i3KJucaC 3Fn_gxP3JA5jreJg" type="text/javascript"></script>
    <link href="file:///Macintosh HD/Users/terencepires/Desktop/Nabe/www.nabe.fr/css/untitled.css" rel="stylesheet" type="text/css" />
    </head>
    <body onunload="GUnload()">
    <div class="carte" id="map" style="width: 550px; height: 450px"></div>
    <p><a href="http://www.econym.demon.co.uk/googlemaps/basic1.htm">Back to the tutorial page</a></p>

    <noscript>

    <p><b>Votre navigateur ne semble pas supporter Javascript.</b>
    Ou Javascript n'est pas activé. Mais on pense à tout : suivez ce
    lien <a href="http://www.nabe.fr/maps/mapbabalu.html">pour afficher directement la carte du lieu de concert
    </p>
    </noscript>

    <script type="text/javascript">

    //<![CDATA[

    if (GBrowserIsCompatible()) {

    // A function to create the marker and set up the event window
    // Dont try to unroll this function. It has to be here for the function closure
    // Each instance of the function preserves the contends of a different instance
    // of the "marker" and "html" variables which will be needed later when the event triggers.
    function createMarker(point,html) {
    var marker = new GMarker(point);
    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
    });
    return marker;
    }

    // Display the map, with some controls and set the initial location
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(48.853365,2.374828),16);

    // Set up one marker with info windows

    var point = new GLatLng(48.853365,2.374828);
    var marker = createMarker(point,'<div style="width:240px; font-family:arial"><a href="http://www.babalu-paris.com">Le Babalù</a><br> 3, passage Thière<br>Paris 11<p>Tel : 01 48 06 28 63<p><img src="fachada_000.jpg" width=150 height=100></div>')
    map.addOverlay(marker);

    }

    // display a warning if the browser was not compatible
    else {
    alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/
    // http://www.econym.demon.co.uk/googlemaps/

    //]]>
    </script>

    </body>

    </html>
    Last edited by supertiti; 12-26-2006 at 02:14 PM. Reason: completing post

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    That is so cool!
    Never seen a widget before, I'll be using one here in a few minutes!!!

    Oh yeah, here's a little snippet that will center it for you:
    Code:
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAATmH4N4Jgl3Edrbp_Br4PjxSYC9tfrGJiOQP50RasO1vcjpBPDRR924i3KJucaC 3Fn_gxP3JA5jreJg" type="text/javascript"></script>
    <link href="file:///Macintosh HD/Users/terencepires/Desktop/Nabe/www.nabe.fr/css/untitled.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #map {
    	margin: 0 auto;
    }
    </style></head>
    <body onunload="GUnload()">
    <div class="carte" id="map" style="width: 550px; height: 450px"></div>
    <p><a href="http://www.econym.demon.co.uk/googlemaps/basic1.htm">Back to the tutorial page</a></p>
    The red stuff is new.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Great, thanks a lot !!

    But you'll have to sign up for a key to your own site, the key provided can only work for mine at this time

    Here are the links for both the API documentation and the key request

    Thanks again man !

  • #6
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another thing, somebody told me that I could implement this in my webpage, but really, I don't know where to put these lines :

    <link rel="stylesheet" type="text/css" href="foo.css" media="screen">
    <link rel="stylesheet" type="text/css" href="bar.css" media="print">

    Could you help me once again ?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,737
    Thanks
    22
    Thanked 1,836 Times in 1,820 Posts
    Those lines link the files foo.css and bar.css to your webpage.
    They go inside your head tags like this:
    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" />
    <link rel="stylesheet" type="text/css" href="foo.css" media="screen">
    <link rel="stylesheet" type="text/css" href="bar.css" media="print"> 
    <title></title>
    <link href="global.css" rel="stylesheet" type="text/css" />
    </head>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, got it

    Thanks !


  •  

    Posting Permissions

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