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
Diego TapiaDiego Tapia 

I can not show google maps.

Hi everyone!
I took the code of this example and added my api key.
my page can call the jquery library but the google library can not,
Is it because of the pixels? I'm using 1080p screen but in the css i put 250px
https://salesforce.stackexchange.com/questions/146154/how-to-get-the-address-on-clicking-in-the-google-map
User-added image
<apex:page standardController="Account" > 
    <script  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjHETKBAuSy2JcXUdg6itU3nYFze4W_eU&callback=initMap"> </script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>    
    <style>
        #map {
          font-family: Arial;
          font-size:12px;
          line-height:normal !important;
          height:250px;
          background:transparent;
        }
    </style>    
    <apex:form id="accountform" >
        <apex:pageBlock id="accountblock">
            <apex:pageBlockSection title="Account details">
                <apex:outputField Value="{!Account.Name}"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection id="addressblocksection" title="Address details" columns="2">
                <apex:inputField id="BillingStreet" value="{!Account.BillingStreet}" />
                <apex:inputField id="BillingCity" value="{!Account.BillingCity}" />
                <apex:inputField id="BillingState" value="{!Account.BillingState}" />
                <apex:inputField id="BillingPostalCode" value="{!Account.BillingPostalCode}" />
                <apex:inputField id="BillingCountry" value="{!Account.BillingCountry}" />
            </apex:pageBlockSection>
        </apex:pageBlock>
        <div id="map">Hello</div> 
        <script type="text/javascript">
            $(document).ready(function() {
                var map;
                var marker;             
                var myOptions = {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false
                }                
                var geocoder = new google.maps.Geocoder();
                var address = "{!JSENCODE(Account.BillingStreet)}, " + "{!JSENCODE(Account.BillingCity)}, " + "{!JSENCODE(Account.BillingPostalCode)}, " + "{!JSENCODE(Account.BillingCountry)}";
                address = address.replace(/(\r\n|\n|\r)/gm,"");
                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(map, 'click', function(event) {
                              geocoder.geocode({'latLng': event.latLng},function(results, status){
                                  if (status == google.maps.GeocoderStatus.OK && results.length) {
                                      result=results[0].address_components;
                                      var info=[];
                                      for(var i=0;i<result.length;++i){
                                        if(result[i].types[0]=="street_number"){
                                            info.push(result[i].long_name);
                                        }
                                        if(result[i].types[0]=="route"){
                                            info.push(result[i].long_name);
                                            document.getElementById('{!$Component.accountform.accountblock.addressblocksection.BillingStreet}').value = info.join(' ');
                                        }
                                        if(result[i].types[0]=="locality"){
                                            document.getElementById('{!$Component.accountform.accountblock.addressblocksection.BillingCity}').value = result[i].long_name;
                                        }
                                        if(result[i].types[0]=="administrative_area_level_1"){
                                            document.getElementById('{!$Component.accountform.accountblock.addressblocksection.BillingState}').value = result[i].long_name;
                                        }
                                        if(result[i].types[0]=="country"){
                                            document.getElementById('{!$Component.accountform.accountblock.addressblocksection.BillingCountry}').value = result[i].long_name;
                                        }
                                        if(result[i].types[0]=="postal_code"){
                                            document.getElementById('{!$Component.accountform.accountblock.addressblocksection.BillingPostalCode}').value = result[i].long_name;
                                        }                                       
                                      }
                                  }
                              });
                            });                         
                        }
                    }else{
                        $('#map').css({'height' : '15px'});
                        $('#map').html("Oops! {!Account.Name}'s billing address could not be found, please make sure the address is correct.");
                    }
                });
            });
        </script>
    </apex:form>
</apex:page>

 
AbhimanyuAbhimanyu
Hi,

I just tested the code above in my org and looks like the API Key is not yet enabled

js?key=AIzaSyBjHETKBAuSy2JcXUdg6itU3nYFze4W_eU&callback=initMap:54
Google Maps JavaScript API error: ApiNotActivatedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error

User-added image

Please see https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error

Like the answer, if it solves the problem.