function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sandy_salesfdc1sandy_salesfdc1 

Google map in visual-force component

The bellow component is giving returning blank(but its printing the value "Hellow all") when used in a visualforce page ..
but when used in a plain html in my local machine is returning the map.
Please advice

<apex:component > Hello all <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map-canvas { height: 100% } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=KeyXXXX&sensor=false"> </script> <script type="text/javascript"> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"/> </body> </apex:component>


Best Answer chosen by Admin (Salesforce Developers) 
gautam_singhgautam_singh

Hi,

 

Try this piece of code , It works correctly for me in my developer account.

<apex:component>

    <style>
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>   
    
    <script>
        var map;
                
        function initialize() {
            
            // set the map options in the format that V3 of googlemaps expects
            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(32.5206608,-86.80249),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            // attach our map to the map_canvas div
            map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
            
            
                             
        } // function initialize()

        google.maps.event.addDomListener(window, 'load', initialize);
            
        function showAddress(title, content, Lat, Long) {
        
            // convert our raw values to the format that google expects                                 
            var latlng = new google.maps.LatLng(parseFloat(Lat), parseFloat(Long));
            
            if (latlng != null) {
                                            
                // create an info window            
                var infowindow = new google.maps.InfoWindow({
                    content: content
                });
                                            
                // Create a marker on the map                   
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: title                        
                });
                
                // Add an event to the marker so the info window will appear when it is clicked
                google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map,marker);
                });
                                                        
            } // check for null latlng due an error parsing
                                            
        } // end show address          
                        
    </script>   
      <div id="map_canvas" style="width: 100%; height: 100%"></div>

</apex:component>

 


Also , You need to add   sidebar="false" showHeader="false"  over the page in which you will use your Component as this removes the Standard Javascripts which were restricting the page to be displayed. Let me know if you face any issues.


Important :

Click on the Star Icon aside if this post provides you with useful information and if this is what you where looking for then please mark it as a solution for other benefits.

Thank You