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

<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>

 

I do not find errors in my code but it shows me the empty account page without the map.
Account view

<apex:page standardController="Account">
<apex:pageBlock >
<head>



<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBjHETKBAuSy2JcXUdg6itU3nYFze4W_eU"></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: 20,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: true
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalCode}";;

  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b>"
  });

  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 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:500px;
  background:transparent;
}
</style>

</head>

<body>
<div id="map"></div> 
</body> 
</apex:pageBlock>
</apex:page>

 

i can not use the apex maps module.
"error console: unknown module apex maps"
i am using console dev from web salesforce and i am "free user" i have not edicion special

I don´t know how I can see my apex page in a browser

I do not find errors in my code but it shows me the empty account page without the map.
Account view

<apex:page standardController="Account">
<apex:pageBlock >
<head>



<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyBjHETKBAuSy2JcXUdg6itU3nYFze4W_eU"></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: 20,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: true
  }

  var map;
  var marker;

  var geocoder = new google.maps.Geocoder();
  var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingPostalCode}";;

  var infowindow = new google.maps.InfoWindow({
    content: "<b>{!Account.Name}</b>"
  });

  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 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:500px;
  background:transparent;
}
</style>

</head>

<body>
<div id="map"></div> 
</body> 
</apex:pageBlock>
</apex:page>