Click here to Skip to main content
15,867,686 members
Please Sign up or sign in to vote.
3.00/5 (1 vote)
See more:
Hello,

I am looking for a solution to center a script from google maps on my website.
Here is the link to view the image:
http://img02.deviantart.net/4a2d/i/2016/287/c/6/naamloos_by_benjaminhallows-daky4nu.png[^]

Sincerely,

~Andreas

html:
HTML
<!DOCTYPE html>
<html>
<header>
      <link rel="stylesheet" type="text/css"href="Contact.css">
         <ul>
          <li><a href="header.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a class="active" href="">Contact</a></li>
          <li><a href="">Gallerij</a></li>
          <li><a href="">Agenda</a></li>
          <li><a href="">Openingstijden</a></li>
          <li><a href="">Menu</a></li>
        
       <p> --- Cafe <strong> Welkom</strong> ---
        </ul>
</header>

<body>
    <br>
    <div>
    <title>Contact</title>
    <p><strong>Contact</strong></p>
    <p>telefoon:015 63 53 93</p>
    <p>email:</p>
    <p>Hier zijn wij!</p>
    
    <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:435px;width:696px;'><div id='gmap_canvas' style='height:435px;width:696px;'></div><div><small><a href="http://www.embedgooglemaps.com/nl/">Genereer hier eenvoudig je Google Maps code!									Klik hier!									Bezoek onze website</a></small></div><div><small><a href="https://glasvezelvergelijken.org/">Bezoek onze website</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:10,center:new google.maps.LatLng(51.0260407,4.690030299999989),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(51.0260407,4.690030299999989)});infowindow = new google.maps.InfoWindow({content:'<strong>Cafe Welkom</strong><br>Hoogstraat 36, 2223 Schriek<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
    
    </div> 
    
</body>
<br>
<br>
<foot>
    <p style="font-size:12px;">Alle rechten naar Cafe Welkom Schriek.</p>
</foot>
</html>


What I have tried:

HTML
header
{
text-align: center;
list-style-position: outside;

}
ul {
list-style-type: none;
position:static;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;

}

li {
float: left;
text-underline-position: alphabetic;


}

li a {
font-size: 22px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;


}


li a:hover {
background-color: darkkhaki;
}
p
{
font-family: sans-serif;
color: lightgoldenrodyellow;
font-size: 25px;
}

body
{
    background-color: black;
    
}

div
{
    text-align: center;
}
script
{
    text-align: center;
}

foot p
{
    text-align: center;
    background-color: #333;
}
Posted
Updated 2-Nov-22 6:00am
Comments
Richard Deeming 13-Oct-16 12:37pm    
You're not trying to center the <script> tag, because that's not a visible element.

Instead, you're trying to center the <div> tag which the script is updating (gmap_canvas).

Centering in CSS: A Complete Guide[^]

Hello,

HTML
 <div align="center">
  This is some content!
</div> 


You must align the DIV element before the script tag.

Cheers,
JAFC
 
Share this answer
 
v3
Thank you all for your solutions and advices!

The text align with div didn't work on the script
but I figured out the solution was this:
CSS
div
{
    object-position: center;
   
}


or

HTML
<div style="object-position:center">
</div>


With that I succeeded centering the script.
 
Share this answer
 
Comments
W Balboos, GHB 14-Oct-16 9:34am    
I've never uses the object-position style. Looking it up, it appears to be purposed for animation:

https://developer.mozilla.org/en-US/docs/Web/CSS/object-position.

The other solution's methods have been working for years. Check to see if your style is supported on all of the browsers you target.
Depending upon your circumstances, you may need to use:
HTML
<div style="text-align: center; width: 100%">
  
</div>

The differences (from previous answer):
- using CSS style instead of old attribute methodology. Images are normally handled like text with respect to alignment.
- the width:100% forces div to take entire width of it's container and map will be centered in that space. Otherwise, it will center in div but not on page.

If you have other items in-line with the image than you either have to take their widths into account (and center the div containing the image) or consider using z-index styles in order to layer the items.

A further consideration - you could also consider sizing your div with a specific width and then aligning it via style='margin:0px auto 0px auto;'
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900