...

View Full Version : Script alignment



supertiti
12-26-2006, 06:23 AM
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

Excavator
12-26-2006, 06:34 AM
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.

supertiti
12-26-2006, 02:11 PM
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_Br4PjxSYC9tfrGJiOQP50RasO1vcjpBPDRR924i3KJucaC3Fn_gxP3 JA5jreJg" 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>

Excavator
12-26-2006, 08:13 PM
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:

<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.

supertiti
12-26-2006, 08:42 PM
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 (http://www.google.com/apis/maps/)

Thanks again man !

supertiti
12-26-2006, 09:58 PM
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 ?

Excavator
12-26-2006, 10:04 PM
Those lines link the files foo.css and bar.css to your webpage.
They go inside your head tags like this:


<!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>

supertiti
12-26-2006, 10:07 PM
ok, got it

Thanks !



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum