+ Start a Discussion
OssieOssie 

Integrating Google Maps

Hi All,

 

Need some help please.  I have integrated Google Maps (inline) using Visualforce within the Accounts object and it works perfectly.  However, i would now like to make a small change whereby i would like to fix the zoom level and so is this possible?  If so any ideas on how to do this would be greatly appreciated.

 

Please see my visualforce code below (if it helps).

 

<apex:page standardController="Account">

<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?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: Map.SetZoom(15),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!Account.Address_Line_1__c}, " + "{!Account.Address_Line_2__c}, " + "{!Account.Address_Line_3__c}, " + "{!Account.City__c}, "+" {!Account.State_County__c}, "+" {!Account.Postal_Code__c} "+" {!Account.Country__c}";

  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b><br>{!Account.Address_Line_1__c}<br>{!Account.Address_Line_2__c}, {!Account.Address_Line_3__c}<br>{!Account.City__c}<br>{!Account.State_County__c}<br>{!Account.Postal_Code__c}<br>{!Account.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: "{!Account.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! {!Account.Name}'s 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>

  . 

Best Answer chosen by Admin (Salesforce Developers) 
Avidev9Avidev9

add This to listener section 

 

google.maps.event.addListener(map, 'zoom_changed', function() {
     map.setZoom(15);
});

 Change the vlaue fo setZoom to something that you want to set.

After applying this user wont be able to change the zoom level

All Answers

Avidev9Avidev9

add This to listener section 

 

google.maps.event.addListener(map, 'zoom_changed', function() {
     map.setZoom(15);
});

 Change the vlaue fo setZoom to something that you want to set.

After applying this user wont be able to change the zoom level

This was selected as the best answer
OssieOssie

Excellent.  Thank you!