Maps left top, not centered - php

Question

When I'm clicking on add marker, the marker is in the top left of maps and not in the center.
I know that I'm working on V2, but I need it to work so I can get myself some time to figure V3 out.
Can someone please help me to fix this?
Already tried:
map.setCenter() on different places, but nothing works.
This is the main script:
<script
src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=<?php echo $this->params->get('map_api_key');?>"
type="text/javascript"></script>
<script type="text/javascript">
//<!--
var map;
var marker;
var markeradded=false;
var markerfixed=false;
var current_point;
var catIcon;
function initialize()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map_canvas"),{ size: new GSize(430, 315) });
map.setUIToDefault();
map.disableScrollWheelZoom();
geocoder = new GClientGeocoder();
map.checkResize()
}
}
window.addEvent('domready',function()
{
initialize();
//var mapSlider = new Fx.Slide('gb_maplocator', {duration: 1000});
var mapSlider = document.getElementById('gb_maplocator');
//var mapSlider = $('gb_maplocator');
<?php if( $this->data->published==0){?>
mapSlider.style.visibility = 'hidden';
mapSlider.style.height = '0px';
mapSlider.style.overflow = 'hidden';
<?php } ?>
$$('.gb_map_controls').addEvent('click',function(){
if(this.getProperty('value')==1)
{
mapSlider.style.visibility = 'visible';
mapSlider.style.height = 'auto';
}
else if(this.getProperty('value')==0)
{
mapSlider.style.visibility = 'hidden';
mapSlider.style.height = '0px';
mapSlider.style.overflow = 'hidden';
}
});
$('btnAddtomap').addEvent('click',
function(e) {
$('map_level').value=map.getZoom();
$('map_glat').value=current_point.lat();
$('map_glng').value=current_point.lng();
});
GEvent.addListener(map, "zoomend",
function(oldlevel,newlevel) {
$('map_level').value=newlevel;
});
GEvent.addListener(map, "dragend",
function() {
current_point=map.getCenter();
});
<?php
if( $this->pin->map_image )
{
?>
catIcon = new GIcon();
catIcon.image = '<?php echo JUri::root().$this->pin->map_image.".".$this->pin->extension;?>';
catIcon.shadow = '<?php echo JUri::root().$this->pin->shadow_image.".".$this->pin->extension;?>';
//catIcon.iconSize = new GSize(25.0, 32.0);
//catIcon.shadowSize = new GSize(42.0, 32.0);
catIcon.iconAnchor = new GPoint(12.0, 16.0);
catIcon.infoWindowAnchor = new GPoint(12.0, 16.0);
map.disableScrollWheelZoom();
<?php
}
if(abs($this->data->glat)==0&&abs($this->data->glng)==0)
{
$country=$mainframe->getUserState($option."countrytitle");
$region=$mainframe->getUserState($option."regiontitle");
$address= array();
if($region!= JText::_('ALL') && !empty($region)){
$address[]=$region;
}
if($country!= JText::_('ALL') && !empty($country)){
$address[]=$country;
}
array_filter ($address);
if(count($address)>0)
{
?>
showAddress('<?php echo implode(',',$address)?>');
<?php
}
else
{
?>
showAddress('<?php echo $this->params->get('map_default_address','Brisbane, Australia');?>');
<?php
}
}
else
{
if( ! $this->pin->map_image && $this->data->map_image )
{
?>
catIcon = new GIcon();
catIcon.image = '<?php echo JUri::root().$this->data->map_image.".".$this->data->extension;?>';
catIcon.shadow = '<?php echo JUri::root().$this->data->shadow_image.".".$this->data->extension;?>';
//catIcon.iconSize = new GSize(25.0, 32.0);
//catIcon.shadowSize = new GSize(42.0, 32.0);
catIcon.iconAnchor = new GPoint(12.0, 16.0);
catIcon.infoWindowAnchor = new GPoint(12.0, 16.0);
<?php }?>
current_point=new GLatLng(<?php echo $this->data->glat;?>,<?php echo $this->data->glng;?>);
map.setCenter(current_point,<?php echo $this->data->level;?>);
marker = new GMarker(current_point,{icon:catIcon,draggable:true});
GEvent.addListener(marker, "dragend",
function(latlng) {
current_point = latlng;
$('map_level').value=map.getZoom();
$('map_glat').value=latlng.lat();
$('map_glng').value=latlng.lng();
});
marker.disableDragging();
map.addOverlay(marker);
checkResize()
markeradded=true;
markerfixed=true;
$('addMarkerButton').disabled=true;
$('addMarkerButton').setHTML("<?php echo JText::_('REMOVE_MARKER');?>");
$('fixMarkerButton').setHTML("<?php echo JText::_('UNFIX_MARKER');?>");
$('map_level').value=map.getZoom();
$('map_glat').value=current_point.lat();
$('map_glng').value=current_point.lng();
<?php if($this->data->published==0){?>
mapSlider.style.visibility = 'hidden';
mapSlider.style.height = "0px";
mapSlider.style.overflow = 'hidden';
<?php }?>
<?php
}
?>
if(markeradded)
{
$('fixMarkerButton').disabled=false;
}
else
{
$('fixMarkerButton').disabled=true;
}
});
window.addEvent('unload',function(){GUnload()});
//-->
</script>
<div class="gb_madata_publish">
<label><?php echo JText::_('Activeer Google Maps');?>:</label><div class="gb_madata_publish_control"><?php echo $this->lists['status'];?></div>
</div>
<div class="gb_map_locator" id="gb_maplocator">
<a id="btnAddtomap"><?php echo JText::_('LOCATE_ADDRESS_TO_MAP');?></a>
<fieldset class="adminform"><input type="hidden" name="glat"
id="map_glat" /> <input type="hidden" name="glng" id="map_glng" /> <input
type="hidden" name="level" id="map_level" />
<div id="map_canvas" style="width: 430px; height: 315px"><script>checkResize() </script></div>
<br />
<div class="mapbuttons"><a id="addMarkerButton"><?php echo JText::_('ADD_MARKER');?></a>
<a id="fixMarkerButton"><?php echo JText::_('FIX_MARKER');?></a></div>
</fieldset>
</div>
<?php
}
?>
And this is the JavaScript file that is included:
/**
* Map controller buttons
*
*/
window.addEvent('domready', function() {
var country_id = '';
var region_id = '';
var address1 = '';
var address2 = '';
$('btnAddtomap')
.addEvent(
'click',
function(e) {
e = new Event(e);
e.stop();
if($('address1')== undefined && $('address2')== undefined) return false;
if($('country_id')!= undefined) country_id= $('country_id').value;
if($('region_id')!= undefined) region_id= $('region_id').value;
if($('address1')!= undefined) address1= $('address1').value;
if($('address2')!= undefined) address2= $('address2').value;
url = 'index.php?option=com_listbingo&format=raw&task=addons.map.admin.loadadd&cid='
+ country_id
+ '&region_id='
+ region_id;
url += '&street=' + address2
+ '&address='
+ address1;
req = new Ajax(url, {
onComplete :showAddress,
method :'get',
evalscript :true
});
req.request();
setCenter()
});
$('addMarkerButton').addEvent(
'click',
function(e) {
e = new Event(e);
e.stop();
if (!markeradded) {
marker = new GMarker(current_point, { icon:catIcon,
draggable :true
});
$('map_level').value=map.getZoom();
$('map_glat').value=(0);
$('map_glng').value=(0);
map.addOverlay(marker);
marker.enableDragging();
}
});
});

Answer 1

Done, i solved it by not using hidden divs.