+ Start a Discussion

Google Map VF Page Position

I am trying to display a Google map on a dashboard with  markers to indicate status at several locations. I obtained the VF code below from the forum that does do what I want, but it offsets the map on the page leaving a blank space of about 30% of the page width to the left. I don' t really want to become an expert on Google maps since I only need it for this one case. Also, I'm famiilar with HTML, but not an expert. Is there anyone who can explain why I'm getting the blank space, and how I can control the position of the map on the page? Would save me a lot of time and a headache. Thanks!


<apex:page Controller="LocationMapController2">




<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">


$(document).ready(function() {


  var myOptions = {

    zoom: 5,

    mapTypeId: google.maps.MapTypeId.ROADMAP,

    mapTypeControl: false



  var map;

  var marker;


  var geocoder = new google.maps.Geocoder();

  var address = "{!LocationInfo.Street__c}, " + "{!LocationInfo.City__r.Name}, " + "{!LocationInfo.PostalCode__c}, " + "{!LocationInfo.Country__r.Name}";


  var infowindow = new google.maps.InfoWindow({

    content: "<b>{!LocationInfo.Name}</b><br>{!LocationInfo.Street__c}<br>{!LocationInfo.City__r.Name}, {!LocationInfo.PostalCode__c}<br>{!LocationInfo.Country__c}"



  geocoder.geocode( { address: address}, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK && results.length) {

      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {


        //create map

        map = new google.maps.Map(document.getElementById("map"), myOptions);


        //center map



        //create marker

        marker = new google.maps.Marker({

            position: results[0].geometry.location,

            map: map,

            title: "{!LocationInfo.Name}"



        //add listeners

        google.maps.event.addListener(marker, 'click', function() {



        google.maps.event.addListener(infowindow, 'closeclick', function() {






    } else {

      $('#map').css({'height' : '15px'});

      $('#map').html("Oops! {!LocationInfo.Name}'s billing address could not be found, please make sure the address is correct.");





  function resizeIframe() {

    var me = window.name;

    if (me) {

      var iframes = parent.document.getElementsByName(me);

      if (iframes && iframes.length == 1) {

        height = document.body.offsetHeight;

        iframes[0].style.height = height + "px";









#map {

  font-family: Arial;


  line-height:normal !important;









<div id="map"></div>