Jump to content


Photo

Google Custom Markers does not appear


  • Please log in to reply
1 reply to this topic

#1 sadboys

sadboys
  • Members
  • PipPip
  • Member
  • 11 posts

Posted 05 February 2018 - 06:37 AM

Hello, I'm currently learning Google Maps API, I created a page that shows the Google Maps with custom markers. My problem is that the Google Maps works fine but the custom markers that I set does not work.

 

 

Here's what I did.

script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSTRDm6eRdkpoVOB2VJVJgTCNgmcuDcq0&callback=initMap">
        </script>
        <script>
            function initmap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 16,
                    center: new google.maps.LatLng(14.529133, 121.021747),
                    mapTypeId: 'roadmap'
                });

                var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
                var testIcon = 'http://maps.google.com/mapfiles/kml/paddle/';

                var icons = {

                    evac: {
                        icon: iconBase + 'ranger_station.png'
                    },

                    warehouse: {
                        icon: iconBase + 'truck.png'
                    }
                };

                var features = [
                    {
                        position: new google.maps.LatLng(14.529133, 121.021747),
                        type: 'evac'
                    }
                ];

                features.forEach(function(feature) {
                    var marker = new google.maps.Marker({
                        position: feature.position,
                        icon: icons[feature.type].icon,
                        map: map
                    });
                });
            }
        </script>
        </head>

        <body onload="initmap()">
        </body>
        <div id="map_canvas" style="width: 1100px; height: 1000px"></div>

I'm using the KML map files right now but it does not work, where did I get wrong here?



#2 dalecosp

dalecosp
  • Members
  • PipPipPip
  • Advanced Member
  • 414 posts
  • LocationMissouri

Posted 05 February 2018 - 02:59 PM

Off the top of my head (I'm not really a human JS engine, so check your error console ;)  ) ...

1.  No opening bracket on first line "script" tag ... ;)  (being pedantic here :D )
2.  Name "map" is undeclared?

To debug this, I'd put some console logging into the lambda/anonymous function inside the foreach, to make sure the data values are what they're supposed to be ... especially "feature.position".  Hope this helps ...


"God doesn't play dice" --- Albert Einstein
"Perl is hardly a paragon of beautiful syntax." --- Weedpacket




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users