function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SwiftguySwiftguy 

Simple Google Map Code not working

Hello All,

Trying to display  a simple Google Map on a Visual Force page, but its not displaying below is the code. Kindly help me out.
  
<apex:page applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" showHeader="false" standardStylesheets="false">

   
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #delhi {
        height: 100%;
      }
    </style>
    </head>
    <body>
      <div id="delhi"></div>
      <script>
      
        var delhi;
        
        function initMap() {
          delhi = new google.maps.Map(document.getElementById('delhi'), {
            center: {lat: 28.6139, lng: 77.2090},
            zoom: 8
          });
        }
        </script>
        
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_27ofSH4uzv_M-Vc7mTmh_zjoO0A4BWw&callback=initMap" async="true" defer="true">
</script>
        
    </body>
    
  </html>
    
</apex:page>

 
Deepali KulshresthaDeepali Kulshrestha
Hi Vikram,
Greetings to you!

I have gone through your query and I realize.

Your API project may have been deleted from the Google Cloud Platform Console. 
Please check the project for which you generated the API key that's included in JavaScript API loader. 
You can create a new API project and get a new key in the Google Cloud Platform Console.

Please try below link for detailed explanation:

1. https://churchthemes.com/page-didnt-load-google-maps-correctly/

2. https://developers.google.com/maps/documentation/javascript/error-messages#deleted-api-project-map-error
     
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com
SwiftguySwiftguy
Hello Deepali, I created a fresh Google Cloud Map API and pasted the same in the code but still there is no change. Im still staring at a blank web page. Is the below source code correct? * Simple Map html, body { height: 100%; margin: 0; padding: 0; } #delhi { height: 100%; }
*