Sign Up ›
  • Mayuri Mahadule
  • NEWBIE
  • 0 Points
  • Member since 2023
  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 1
    Questions
  • 0
    Replies
2 replies

visualforce integration

I have a need where I have to display Google Map in Account object. Where, the input in Address field should be pinned in the map displayed. And this has to be done with VF. Given is the code that I have used. Please help me out with this. 

<apex:page standardController="Account">
    

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

        
    <body>
        <apex:form >
            <div id="map"></div>
            <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBS5zY4ayE78DlkuW2qHAxyDCR2foxY0Ngsy"> 
                $ = jQuery.noConflict();
                $(document).ready(function() {
                     var myOptions = {
                        zoom: 15,
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        mapTypeControl: false
                    }
                    
                    var map;
                    var marker;
                    
                    
                    var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}";
                    
                    var infowindow = new google.maps.InfoWindow({
                        content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}, {!Account.BillingPostalCode}<br>{!Account.BillingCountry}"
                    });
                    
                    console.log(infowindow);
                    
                    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 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>
        
    </apex:form>
</body> 
</apex:page>