Click here to Skip to main content
15,906,329 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm trying to display markers for each address i have in my database. I'm displaying a map, fetching the addresses, and trying to convert them into latitude and longitude to be able to display the markers. Unfortnately I'm getting the above error. I checked other questions and google map developers page, but didn't find the solution. What might be the problem?

What I have tried:

<div class="map" id="map">
            <!-- MAP -->
            <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "MyKEY", v: "weekly"});</script>
    <script>

        <?php
            if(is_array($fetchData)){      
            $sn=1;
            foreach($fetchData as $data){
        ?>
        
            var address = '<?php echo $data['post']??''; ?>' + '<?php echo $data['city']??''; ?>' + '<?php echo $data['street']??''; ?>' + '<?php echo $data['number']??''; ?>';     
        
            var geocoder = new google.maps.Geocoder();
            

            geocoder.geocode( { 'address': address}, function(results, status) {

            if (status == google.maps.GeocoderStatus.OK) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                alert(latitude);
            } 
            }); 
        
            let map;

            async function initMap() {
            
            const position = { lat: latitude, lng: longitude };
            
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerView } = await google.maps.importLibrary("marker");

            
            map = new Map(document.getElementById("map"), {
                zoom: 4,
                center: position,
                mapId: "DEMO_MAP_ID",
            });

            const marker = new google.maps.Marker({
                map: map,
                position: position,
                title: "Title",
            });
            }

            initMap();
    </script>
            <?php
                $sn++;}}else{ ?>
            <?php
            }?>
Posted
Updated 31-Mar-23 22:09pm
Comments
Member 15627495 1-Apr-23 3:37am    
you have to load the API from Google geocoder before using it.
István Balogh 1-Apr-23 3:54am    
Thanks for your answear! Could you tell me how to do that? Geocoding API is already enabled in my google cloud account for my API Key

1 solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900