Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
balakrishna yerla 8balakrishna yerla 8 

how to integration google maps with lighting components with latitude and longitude

Siddharth SethSiddharth Seth
Hi balakrishna yerla 8 
this is a general code to construct a map . 
rerender: function (component) {
        
        var nodes = this.superRerender();
        
        var location = component.get('v.location');
		    
        if (!location) {
           
        } else {
            // If the Leaflet library is not yet loaded, we can't draw the map: return
            if (!window.L) {
                return nodes;
            }
            
            // Draw the map if it hasn't been drawn yet
            if (!component.map) {
                var mapElement = component.find("map").getElement();
                component.map = L.map(mapElement, {zoomControl: true}).setView([42.356045, -71.085650], 13);
                component.map.scrollWheelZoom.disable();
                window.L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri'}).addTo(component.map);
            }
            
            
            
            if (location && location.lat && location.long) {
                var latLng = [location.lat, location.long];
                if (component.marker) {
                    component.marker.setLatLng(latLng);
                } else {
                    component.marker = window.L.marker(latLng);
                    component.marker.addTo(component.map);
                }
                component.map.setView(latLng);
            }
            
            return nodes;
        }
        
    }

for more information refer to the link https://www.appexchangecontent.com/salesforce-developers-blogs/google-maps-with-lightning-components-visualforce​

Best Regards,

Siddharth S.
AppPerfect Corp.
salesforce@appperfect.com (mailto:salesforce@appperfect.com)
408-252-4100
http://www.appperfect.com/salesforce/
NagendraNagendra (Salesforce Developers) 
Hi Bala,

Please find the code below and tweak it as per your requirement which might help. 
<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>


Please let us know if this helps.

Thanks,
​Nagendra