You need to sign in to do that
Don't have an account?
Diego 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
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 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
Please see https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
Like the answer, if it solves the problem.