+ Start a Discussion
robertcw777robertcw777 

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">

 

<head>

 

<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

        map.setCenter(results[0].geometry.location);

       

        //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() {

          infowindow.open(map,marker);

        });

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

          map.setCenter(marker.getPosition());

        });

       

      }

     

    } else {

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

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

      resizeIframe();

    }

  });

 

  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";

      }

    }

  }

 

});

</script>

 

<style>

#map {

  font-family: Arial;

  font-size:12px;

  line-height:normal !important;

  height:250px;

  background:transparent;

}

</style>

 

</head>

 

<body>

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

</body>

</apex:page>