lundi 4 janvier 2016

Google Maps API - Map not showing on second initialize

I have implemented in MVC page load Google Map and also draw route map between to cities.

In address parameter I have two cities,first time loading map coming fine but next any time not coming only gray color screen display.

Second time in place of google map gray screen coming.
var map = '';
function ShowTrack(address) {
    markers = [];
    debugger;
    var lst = address.split('~');
    GetMarkers(address);
    document.getElementById("dvMap").innerHTML = '';
    {
        if (lst.length > 1) {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };         
           map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); 
            var infoWindow = new google.maps.InfoWindow();
            var lat_lng = new Array();
            var latlngbounds = new google.maps.LatLngBounds();
            for (i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                latlngbounds.extend(marker.position);
                (function (marker, data) {


                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);

            //***********ROUTING****************//
            //Initialize the Path Array
            var path = new google.maps.MVCArray();
            //Initialize the Direction Service
            var service = new google.maps.DirectionsService();
            //Set the Path Stroke Color
            var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });

            //Loop and Draw Path Route between the Points on MAP
            for (var i = 0; i < lat_lng.length; i++) {
                if ((i + 1) < lat_lng.length) {
                    var src = lat_lng[i];
                    var des = lat_lng[i + 1];
                    path.push(src);
                    poly.setPath(path);
                    service.route({
                        origin: src,
                        destination: des,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                    }, function (result, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                path.push(result.routes[0].overview_path[i]);
                            }
                        }
                    });
                }
            }
        }
    }
}

Aucun commentaire:

Enregistrer un commentaire