lundi 29 janvier 2018

Can't display info windows for markers

I have some troubles with displaying info windows for a marker on the map. I have a json file and markers are return well. But when I click the marker, info window not display.

Below I paste all my code. I feel so confused, because I tried different answers and nothing works fine, I spend few days to fix that and I need some help.

In my code I add console.log to test data and it looks good in console. I will be grateful for every advice.

<script>
    var infowindow = null;

        function initMap() {

        var map = new google.maps.Map(document.getElementById('mapGoogle'), {
            zoom: 14,
            scrollwheel: true,
            center: {lat: 51.500407513572796, lng: -0.129061164107939},
            disableDefaultUI: true,
            gestureHandling: 'greedy',
            styles: [
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#e9e9e9"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#f5f5f5"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 29
                        },
                        {
                            "weight": 0.2
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 18
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#f5f5f5"
                        },
                        {
                            "lightness": 21
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#dedede"
                        },
                        {
                            "lightness": 21
                        }
                    ]
                },
                {
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "visibility": "on"
                        },
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "saturation": 36
                        },
                        {
                            "color": "#333333"
                        },
                        {
                            "lightness": 40
                        }
                    ]
                },
                {
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#f2f2f2"
                        },
                        {
                            "lightness": 19
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#fefefe"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#fefefe"
                        },
                        {
                            "lightness": 17
                        },
                        {
                            "weight": 1.2
                        }
                    ]
                }
            ] 
        });

        infoWindow = new google.maps.InfoWindow();

        // Try HTML5 geolocation.
        /*if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
            lat: position.coords.latitude,
            lng: position.coords.longitude
            };

            map.setCenter(pos);
        }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
        });
        } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
        }*/

        var clusterStyles = [
            {
            textColor: 'white',
            url: 'https://regain-app.com/wp-content/uploads/2018/01/m3.png',
            height: 30,
            width: 30
            },
        {
            textColor: 'white',
            url: 'https://regain-app.com/wp-content/uploads/2018/01/m2.png',
            height: 30,
            width: 30
            },
        {
            textColor: 'white',
            url: 'https://regain-app.com/wp-content/uploads/2018/01/m1.png',
            height: 30,
            width: 30
            }
        ];

        var mcOptions = {
            gridSize: 50,
            styles: clusterStyles,
            maxZoom: 15
        };

        // Create an array of alphabetical characters used to label the markers.
        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

        var icon = {
            url: "https://regain-app.com/wp-content/uploads/2018/01/marker.png",
            scaledSize: new google.maps.Size(14, 14)
        };


        // Add some markers to the map.
        // Note: The code uses the JavaScript Array.prototype.map() method to
        // create an array of markers based on a given "locations" array.
        // The map() method here has nothing to do with the Google Maps API.
        var InfoWindowwindow = new google.maps.InfoWindow({
          content: 'test'
        });


        var temp = 0;
        var markers = locations.map(function(location, i) {

            let marker = new google.maps.Marker({
                position: location,
                label: location.label,
                icon: icon
            });

            let infowindow = new google.maps.InfoWindow({
                content: "sssssss"
            });

            marker.addListener('click', function() {
                infowindow.open(map, marker);
            });

            console.log(temp);
            console.log(infowindow);
            console.log(marker);

            return marker;
        });


        // Add a marker clusterer to manage the markers.
        var markerCluster = new MarkerClusterer(map, markers, mcOptions);

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                                'Error: The Geolocation service failed.' :
                                'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
        }


        }/*end of InitMap*/


        var locations = [];
        var points;
        var url = '/api/points.json';
        var loadData = jQuery.getJSON(url, function(json) {

            jQuery.each( json.results, function( key, val ) {
            // console.log(val.lat);
            // console.log(val.lng);

            locations.push({            
                lat: Number(val.lat),
                lng: Number(val.lng),
                label: "lorem ipsum"
            });

            });
        });

        loadData.complete(function(){
            initMap();
        });
    </script>




Aucun commentaire:

Enregistrer un commentaire