Question

All,
I’ve got the following code to display my maps:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script  type="text/javascript">
function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function'){ 
    window.onload = func
} else { 
    window.onload = function() {
        oldonload();
        func();
    }
}
}

var map,
    infowin=new google.maps.InfoWindow({content:'moin'});
function loadMap() 
{
  map = new google.maps.Map(
    document.getElementById('map_vendor'),
    {   
      zoom: 15,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      center:new google.maps.LatLng(<?php echo $lat; ?>, 
                                    <?php echo $long; ?>)
    });

  addPoints(myStores);
}

function addPoints( points )
{  
  //var bounds=new google.maps.LatLngBounds();
  for ( var p = 0; p < points.length; ++p )
  {
    var pointData = points[p];
    if ( pointData == null ) {map.fitBounds(bounds);return; }
    var point = new google.maps.LatLng( pointData.latitude, pointData.longitude );
    //bounds.union(new google.maps.LatLngBounds(point));
    createMarker( point,  pointData.html );
  }
  //map.fitBounds(bounds);

}

function createMarker(point,  popuphtml) 
{
  var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
  var marker = new google.maps.Marker(
    {
      position:point,
      map:map
    }
  );
  google.maps.event.addListener(marker, 'click', function() {
      infowin.setContent(popuphtml)
      infowin.open(map,marker);
    });

}

function Store( lat, long, text )
{
    this.latitude = lat;
    this.longitude = long;
    this.html = text;
}

var myStores = [<?php echo $jsData;?>, null];
addLoadEvent(loadMap);
</script>

The $jsData is set with the following code:

$lat = get_post_meta($post->ID,'latitude',TRUE);
$long = get_post_meta($post->ID,'longitude',TRUE);
$post_id = $post->ID;
$get_post_info = get_post($post_id); 
$name = $get_post_info->post_title;
$jsData = $jsData . "new Store( $lat, $long, '$name' ),\n";

The point gets displayed correctly however my map isn’t being centered correctly. My maps is always southeast from the location of the point and just a little but I’d like for it to be centered on the point. How can I go about doing this?

EDIT: Here is the CSS that you requested. It’s a theme so I’m sorry if it’s crazy:

#map_vendor{
padding:10px;
width:925px;
height:300px;
}
.styled-image, .the-post-image figure, .styled-slideshow, .gallery .gallery-icon a { 
border-color: #C9CBCD;
background: #F7F7F7;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#E7E8EB));
background: -moz-linear-gradient(top, #fff,  #E7E8EB);
background: linear-gradient(#fff, #E7E8EB);
-pie-background: linear-gradient(#fff, #E7E8EB);  
}
.styled-image, .the-post-image a figure, .gallery .gallery-icon a { 
-webkit-transition: all 0.15s ease-in-out; 
-moz-transition: all 0.15s ease-in-out; 
transition: all 0.15s ease-in-out; 
}
.styled-image, .the-post-image figure, .styled-slideshow, .gallery .gallery-icon a { 
display: block; display: inline-block; outline: none; padding: 6px;
border: 2px solid #C9CBCD; border-width: 1px 1px 2px;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /* border radius */
/* gradient background */
background: #F7F7F7;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#E7E8EB));
background: -moz-linear-gradient(top, #fff,  #E7E8EB);
background: linear-gradient(#fff, #E7E8EB);
-pie-background: linear-gradient(#fff, #E7E8EB);    
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* box shadow */
-webkit-background-clip: padding-box;   /* smoother borders with webkit */ 
}

Thanks!

Answer 1

What does “point” mean?

Currently you set the center to $lat and $lng, but there is no marker(point?) at this position(unless inside $jsData will be the same coordinates).