CODEWITHSUNDEEP
javascriptgoogle-maps
Cosmin
Cosmin

Reputation: 954

Can't see markers on a Google Maps map

I'm trying to place some markers on a Google Maps map. I wrote the code bellow.

The problem is I don't see any of those markers.

I checked the console and didn't see any errors.

What am I doing wrong?

Thank you very much.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Directions service</title>
        <style>
            html, body, #map-canvas {
                height: 100%;
                margin: 0px;
                padding: 0px
            }
            #panel {
                position: absolute;
                top: 5px;
                left: 50%;
                margin-left: -180px;
                z-index: 5;
                background-color: #fff;
                padding: 5px;
                border: 1px solid #999;
            }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>            
            var map;
            var styles = [
                {
                    stylers: [
                        {hue: "#00ffe6"},
                        {saturation: -20}
                    ]
                }, {
                    featureType: "road",
                    elementType: "geometry",
                    stylers: [
                        {lightness: 100},
                        {visibility: "simplified"}
                    ]
                }, {
                    featureType: "poi",
                    elementType: "labels",
                    stylers: [
                        {visibility: "off"}
                    ]
                }, {
                    featureType: "transit",
                    elementType: "labels",
                    stylers: [
                        {visibility: "off"}
                    ]
                },
            ];


            function initialize() {                
                var home = new google.maps.LatLng(45.666396, 25.611569);
                var mapOptions = {
                    zoom: 15,
                    center: home
                }
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                map.setOptions({styles: styles});

            }

            var json = [
                                {
                    "title": "Triaj",
                    "lat": 45.67573,
                    "lng": 25.647464,
                    "description": "Test"                
                },                                {
                    "title": "Baza MTTC",
                    "lat": 45.671123,
                    "lng": 25.640974,
                    "description": "Test"                
                },                                {
                    "title": "RAT Brasov",
                    "lat": 45.669687,
                    "lng": 25.638461,
                    "description": "Test"                
                }                            ];

            for (var i = 0, length = json.length; i < length; i++) {
                var data = json[i], latLng = new google.maps.LatLng(data.lat, data.lng);

                // Creating a marker and putting it on the map
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: data.title
                });                                
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>        
        <div id="map-canvas"></div>
    </body>
</html>

Upvotes: 0

Views: 1068

Answers (1)

hansmei
hansmei

Reputation: 701

Should'nt you put the json and marker code inside the initialize-function in order to trigger it?

Right now, nothing is triggering the for-loop, hence the markers won't show. Put the var json = and everything down to the end of the for-loop inside the initialize-function, and you should be good:)

Upvotes: 3

Related Questions