Polyline disappears due to Google Maps V3 API

Question

Polyline disappears due to Google Maps V3 API

In accordance with the old theme, this problem should be fixed in API version 2 ( https://code.google.com/p/gmaps-api-issues/issues/detail?id=15 )

Testing in Chrome v. 35.0.1916.153 and IE9 appeared, already in Firefox v. 31 works fine.

Codes to show the problem:

http://jsfiddle.net/as0wv114/2/

// HTML <div id="map-canvas"></div> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> //CSS html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px; } //JS var map; var latLngBounds; var coordinate = []; var flightPath = []; window.onload = initialize(); function initialize() { /* Create Map */ var mapOptions = { zoom: 8, mapTypeId: google.maps.MapTypeId.SATELLITE, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM, }, center: new google.maps.LatLng(-24.1207046509, -52.7306060791) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); latLngBounds = new google.maps.LatLngBounds(); /* Create first polyline */ coordinate[0] = new google.maps.LatLng('-24.1207046509', '-52.7306060791'); coordinate[1] = new google.maps.LatLng('-24.1191787720', '-52.7316970825'); coordinate[2] = new google.maps.LatLng('-24.1191864014', '-52.7337504883'); flightPlanCoordinates = [coordinate[0], coordinate[1], coordinate[2]]; flightPath[0] = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 8 }); /* Create second polyline */ coordinate[3] = new google.maps.LatLng('-25.2782688141', '-50.0997734070'); coordinate[4] = new google.maps.LatLng('-25.2793374786', '-50.0998001099'); flightPlanCoordinates = [coordinate[3], coordinate[4]]; flightPath[1] = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 8 }); /* Set polylines in Map */ flightPath[0].setMap(map); flightPath[1].setMap(map); /* Center polilynes in Map */ $.each(coordinate, function(key, value){ latLngBounds.extend(value); }); map.fitBounds(latLngBounds); }

http://jsfiddle.net/as0wv114/3/

  // HTML <div id="map-canvas"></div> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> //CSS html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px; } //JS var map; var latLngBounds; var coordinate = []; var flightPath = []; window.onload = initialize(); function initialize() { /* Create Map */ var mapOptions = { zoom: 8, mapTypeId: google.maps.MapTypeId.SATELLITE, zoomControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM, }, center: new google.maps.LatLng(-24.1207046509, -52.7306060791) }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); latLngBounds = new google.maps.LatLngBounds(); /* Create first polyline */ coordinate[0] = new google.maps.LatLng('-24.1207046509', '-52.7306060791'); coordinate[1] = new google.maps.LatLng('-24.1191787720', '-52.7316970825'); coordinate[2] = new google.maps.LatLng('-24.1191864014', '-52.7337504883'); flightPlanCoordinates = [coordinate[0], coordinate[1], coordinate[2]]; flightPath[0] = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 8 }); /* Create second polyline */ coordinate[3] = new google.maps.LatLng('-25.2782688141', '-50.0997734070'); coordinate[4] = new google.maps.LatLng('-25.2893374786', '-50.0998001099'); flightPlanCoordinates = [coordinate[3], coordinate[4]]; flightPath[1] = new google.maps.Polyline({ path: flightPlanCoordinates, geodesic: true, strokeColor: '#FF0000', strokeOpacity: 1.0, strokeWeight: 8 }); /* Set polylines in Map */ flightPath[0].setMap(map); flightPath[1].setMap(map); /* Center polilynes in Map */ $.each(coordinate, function(key, value){ latLngBounds.extend(value); }); map.fitBounds(latLngBounds); }