how to center my google map script with divs?

Question

so far the text is centered the google maps page hugs the left and then the text underneath it remains centered, i just want the map to be centered.

<div id="row1">
    <div id="note"><img src="http://www.bristol.gov.uk/sites/default/files/styles/hero_image/public/images/children_and_young_people/resources_for_professionals/head_teachers_and_school_administrators/hr/contact_us/we%20will%20be%20back%20soon-sticky%20note.jpg?itok=08vLR_lO"></div>
    <div id = "hours">
        Sorry<br>
        hours<br>
    </div>
    <div id="gmap_canvas" style="height:500px; width:600px;"></div>
    Below text
</div>       

Style:

#row1 {
    text-align: center;
}

Google Map JavaScript:

<script type="text/javascript">
function init_map() {
    var myOptions = {
        zoom: 16,
        center: new google.maps.LatLng(20.0820037, -14.26733380000002),
        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(20.0820037, -14.26733380000002)
    });
    infowindow = new google.maps.InfoWindow({
        content: "<b>Crokson Dine In</b><br/>43 Gill Rd<br/>09521 Hovill"
    });
    google.maps.event.addListener(marker, "click", function() {
        infowindow.open(map, marker);
    });
    infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>

Answer 1

text-align: center cannot center a block element itself. You need auto margins:

<div
    id="gmap_canvas"
    style="height:500px; width:600px; margin-left: auto; margin-right: auto;">