*To Moderator, please do not remove this post, I know this is a duplicate so the following is my argument : I have been going through few forums(include stackoverflow and google forum etc) and view many post of similar problem for the past 3 hours but still can't find any solution. I'm a new programmer and lots more to learn. My google maps v3 manage to load when I open the map and the markers were display as well, but the problem is when the map receive new position from server to display as marker on the map, an error occur:
Line 29,
Unable to get value of the property 'offsetWidth': object is null or undefined
url: http://maps.gstatic.com/intl/fr_fr/mapfiles/api-3/13/2/main.js
I follow the steps from google officiel documentation but still got this problem. Below is my code :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8" />
<title>Ma Page de Google Maps</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 3; padding: 3}
#map_canvas { height: 100%}
</style>
<style type="text/css">
.tooltip {
background-color:#ffffff;
font-weight:bold;
border:2px #006699 solid; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
//Creation de Map
// Variables globales
// ------------------
// Enable the visual refresh
google.maps.visualRefresh = true;
var map = null;
var Table_Pins = {}; // Liste des Pins affichées
var Pos_Info = null; // Dit sur quel marker se situe l'infobulle
var Liste_Points = []; // Pour la mémorisation du tracé
var route = null;
var markers = [];
var _this = this;
//-----------------------------------------------------------------
function initialize()
{
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(43.665, 7.052),
mapTypeId: google.maps.MapTypeId.ROADMAP, //Type de carte
mapTypeControl: true,
panControl: true,
zoomControl: true, //Zoom
scaleControl: true, //Echelle
scaleControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM},
streetViewControl: true
} ;
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
//------------------------
// Ouverture du WebBrowser
// -----------------------
try { google.maps.event.addDomListener(window, 'load', initialize);}
catch (ex){ alert("vous devez etre connecte a l'internet...");}
// ------------------------------------------------------------------------------------
// Affichage des véhicules
// ------------------------------------------------------------------------------------
var myPin =[];
var infowindow;
function Affiche_Pin(Lat, Long, immat, type, site, vitesse, date)
{ myPin = Table_Pins[immat];
var myPinhtml = '<b style="color:green">Véhicule : ' + immat + ' ' + '</b><br>' +
'Site : ' + site + '<br>' +
'Type : ' + type + '<br>' +
'Vitesse : ' + vitesse + ' km/h' + '<br>' +
'Date : ' + date + '<br>';
if (typeof myPin != "undefined")
{
// La Pin est déja placée, on la déplace
// -------------------------------------
myPin.setPosition(new google.maps.LatLng(Lat, Long))
map = new google.maps.Map(document.getElementById('map'));
map.setCenter(new google.maps.LatLng(Lat, Long));
map.setZoom(12);
if (Pos_Info == myPin)
{
infowindow = new google.maps.InfoWindow({
content: myPinhtml,
position: new google.maps.LatLng(Lat, Long) });
infowindow.open(map, myPin);
} //end if (pos_info)
}//end if (mypin)
else{
// -------------------------------
// Création de la Pin et placement
// -------------------------------
var imageMarqueur = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal4/icon15.png',
new google.maps.Size(32, 32),
new google.maps.Point(0,0),
new google.maps.Point(16, 32));
var ombreMarqueur = new google.maps.MarkerImage('http://maps.google.com/mapfiles/kml/pal4/icon15s.png',
new google.maps.Size(56, 32),
new google.maps.Point(0,0),
new google.maps.Point(16, 32));
var vehlatlng = new google.maps.LatLng(Lat, Long) ;
var marker = new google.maps.Marker({
map: map,
position: vehlatlng,
icon: imageMarqueur,
shadow: ombreMarqueur });
infowindow = new google.maps.InfoWindow({
content: myPinhtml,
position: vehlatlng });
markers.push(marker);
marker.setMap(map);
// Evenement "Click" et "infowindowopen" du marker
// ---------------------------
google.maps.event.addListener(marker, 'click', function() {
if(lastOpenInfoWin) lastOpenInfoWin.close();
lastOpenInfoWin = infowindow;
infowindow.open(marker.get('map'), marker);
Pos_Info = marker;});
Table_Pins[immat] = marker;
}//end else
}//end function affiche_pin
// ------------------------------------------------------------------------------------
// On centre le véhicule
// ------------------------------------------------------------------------------------
function Centrer_Pin(immat) {
var myPin = Table_Pins[immat];
if (typeof myPin != "undefined")
{ infowindow.close();
map.setZoom(14);
map.setCenter(myPin.getPosition());
infowindow.open(map, myPin);
google.maps.event.addListener(myPin, 'position_changed', function() {
map.panTo(myPin.getPosition());
});
google.maps.event.addListener(map, 'zoom_changed', function() {
infowindow.close();});
}
}
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
Thank you in advance.
