Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Salesforce Admin 110Salesforce Admin 110 

display googlemaps in visualforce page using latitude/longitude values rather than address values

hi ive written a visualforce page to showmap from address fields but i want to do this from latitude and longitude fields
  
<apex:page standardController="Account">

<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBmZQov1SBI9a3f9nWPwCS_cy37nPZIm9I&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: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    mapTypeControl: false
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();   
  /* var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}"; */
 /*  var latlng = ("{!Account.Latitude__c}",  "{!Account.Longitude__c}"); */
   /* var address = "{!Account.Longitude__c}, " + "{!Account.Latitude__c}; */
    var address = "{!Account.Address__c}, " + "{!Account.city__c}, " + "{!Account.postal_code__c}, " + "{!Account.country__c}";  
/* var lat = '{!Account.Latitude__c}';
var lng = '{!Account.Longitude__c}';
var latlng = new google.maps.LatLng(lat, lng); */


  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingCountry}"
  });  

   geocoder.geocode( { address: address}, function(results, status) { 
 /*  geocoder.geocode( { latlng: latlng}, 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' : '25px'});
      $('#map').html("Oops! {!Account.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>

 
Swayam@SalesforceGuySwayam@SalesforceGuy
Hey,

Instead of using the google map api, better to use Apex Map which just provided by Salesforce in previous release,

Use This Tag in your visual force
  
<apex:map width="400px" height="200px" mapType="roadmap" zoomLevel="16" center="{latitude:{!Account.LatitudeTEXT__c},longitude:{!Account.LongitudeTEXT__c}}">
                     <apex:mapMarker title="{!Account.Name}" position="{latitude:{!Account.LatitudeTEXT__c},longitude:{!Account.LongitudeTEXT__c}}"/>
</apex:map>
Also refer (http://jessealtman.com/2015/02/new-spring-15-features-mapping/)

Hope this help

--
Thanks,
Swayam
Nida Khan 5Nida Khan 5
Hello Swayam@SalesforceGuy,

Thanks for Sharing this info.

Regards,
Nida
SHISHIR BANSALSHISHIR BANSAL
It is not working. My requirement is i want to pass Longitude and Latitude to google maps in an email template (visualforce type) 
Suyash Barnwal 2Suyash Barnwal 2
Hey @Nida Khan 5,

Do have the working code for this. Can you please share with us.

Thanks in advance 
bb tbb t
try this option
https://support.formtitan.com/topics/Salesforce/Integration/Mapping_the_google_map_to_Salesforce
pankaj tiwari 13pankaj tiwari 13

Swayam@SalesforceGuy

In my visualforce page map component is not available. It says  Unknown component apex:map
 
shubhi106shubhi106
apex:map doesn't available in the developer edition.
Philip BerryPhilip Berry
I need help. My use case is a little different. I want to pull the geolocation from the google map and store it in the geolocation map field (Property__c.Location__c). I have the visualforce map working from the address, city, zip code field. I don't know how to retrieve the lat and long though from the map. here is the code. Can anyone help?

<apex:page standardController="Property__c">
<head>

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDS5llFUkQMqDCazEhB8ZiYMxjIbgNeIAA&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: 15,mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl: false };
var map;
var marker;
var geocoder = new google.maps.Geocoder();
var address ="{!Property__c.Address__c},{!Property__c.City__c}, {!Property__c.State__c}, {!Property__c.Zip_Code__c}";
var infowindow = new google.maps.InfoWindow({
content: "<b>{!Property__c.Name}</b><br>{!Property__c.Address__c}</br><br>{!Property__c.City__c}</br><br>{Property__c.State__c}</br><br>{!Property__c.Zip_Code__c}</br>"
});
 
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: "{!Property__c.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! {!Property__c.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>
Brian E MillerBrian E Miller
@Phillip

I would suggest using HTTP Callouts to get google map data, rather than using javascript in VF pages.  You could schedule the job to run nightly to update Property__c.Location__c to keep it up to date (or even run a @future callout method at the insert/update trigger level)