locked
Google maps marker info box appears in Wrong location RRS feed

  • Question

  • User728122777 posted

    i created a Google map with multiple markers

    maker position come from database

    each marker have info box with different info

    all working the problem is that the info box show in the place for all the markers

    Code

         function placeMarker(location, ID, Date, IconFile, speed, PlatNumber, CarName) {
    
                var mapLabel = new MapLabel({
                    text: CarName,
                    ,
                    map: map,
                    fontSize: 15,
                    align: 'center'
                });
                mapLabel.set('position', location);
    
    
                marker = new google.maps.Marker({
                    ,
                    map: map,
                    MID: ID,
                    MDate: Date,
                    icon: IconFile,
    
                });
                marker.bindTo('map', mapLabel);
                marker.bindTo('position', mapLabel);
               
                var contentString = "";
                // Creating / Initiating Infobox					
                var infoBubble = new InfoBox({
                    //content: contentString, // Tab content gets appended here.
                    disableAutoPan: false,
                    maxWidth: 0, 
                    pixelOffset: new google.maps.Size(-140, 0),
                    zIndex: null,
                    
                    boxStyle: {
                        //background: "url('tipbox.gif') no-repeat", 
                        opacity: 1,
                        width: "350px"
                    },
                    closeBoxMargin: "0px",
                    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                    infoBoxClearance: new google.maps.Size(1, 1),
                    isHidden: false,
                    pane: "floatPane",
                    enableEventPropagation: true
                });
    
                marker.addListener('click', function () {
    
                    //$.each(infoBubbles, function (ix, vx) {
    
    
                    ////==========================================
                    downloadUrl("Queries.aspx?Action=CarLocation&CarId=" + ID, function (data) {
    
                        var xml = data.responseXML;
    
                        // alert(xml);
                        //  alert(data.responseText);
    
                        // var markers = xml.documentElement.getElementsByTagName("marker");
                        var markers = xml.documentElement.getElementsByTagName("Marker");
                        // alert(markers);
                        for (var i = 0; i < markers.length; i++) {
                            // alert(i);
    
                            var CarName = markers[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
    
                            var PlatNumber = markers[i].getElementsByTagName("PlateNO")[0].childNodes[0].nodeValue;
                            var SubModelName = markers[i].getElementsByTagName("SubModelName")[0].childNodes[0].nodeValue;
                            var CarModelName = markers[i].getElementsByTagName("ModelName")[0].childNodes[0].nodeValue;
                            var IMEI = markers[i].getElementsByTagName("IMEI")[0].childNodes[0].nodeValue;
                            var DeviceModelName = markers[i].getElementsByTagName("DeviceModelName")[0].childNodes[0].nodeValue;
                            var DeviceVenderName = markers[i].getElementsByTagName("DeviceVenderName")[0].childNodes[0].nodeValue;
                            contentString = "<div class='main'><input id='tab1' type='radio' name='tabs' checked> <label for='tab1'>السيارة</label><input id='tab2' type='radio' name='tabs'>";
                            contentString = contentString + "<label for='tab2'>السائق</label><input id='tab3' type='radio' name='tabs'> <label for='tab3'>الجهاز</label><input id='tab4' type='radio' name='tabs'>";
                            contentString = contentString + " <label for='tab4'>الموقع</label><div class='content'> <div id='content1'> <p>الاسم : " + CarName + "</br> رقم اللوحة:" + PlatNumber + " </br> نوع السيارة :" + CarModelName + "  </br> موديل السيارة : " + SubModelName + "</br> السرعة :" + speed + "</p> ";
                            contentString = contentString + " </div> <div id='content2'><p> Driver Data </p>";
                            contentString = contentString + " </div> <div id='content3'><p> رقم الجهاز : " + IMEI + " </br> الشركة المصنعة : " + DeviceVenderName + " </br> الموديل : " + DeviceModelName + " </br> أخر ظهور: " + Date + "</p>";
                            contentString = contentString + " </div><div id='content4'><p>خط الطول " + location.lng() + " </br> خط العرض " + location.lat() + "</br> AAdd </p></div> </div> </div>   ";
                            //   contentString = "<div id='tabs'><ul><li><a href='#tab-1'><span> السيارة</span></a></li><li><a href='#tab-2'><span> السائق</span></a></li><li><a href='#tab-3'><span> الجهاز</span></a></li><li><a href='#tab-4'><span>الموقع</span></a></li></ul><div id='tab-1'><p> رقم اللوحة:" + PlatNumber + " </br> نوع السيارة :" + CarModelName + "  </br> موديل السيارة : " + SubModelName + "</p></div><div id='tab-2'><p>Tab 2 content</p></div><div id='tab-3'><p> رقم الجهاز : " + IMEI + " </br> الشركة المصنعة : " + DeviceVenderName + " </br> الموديل : " + DeviceModelName + " </p></div><div id='tab-4'><p>خط الطول " + location.lng() + " </br> خط العرض " + location.lat() + "</br> AAdd </p></div></div>";
    
                            var geocoder = new google.maps.Geocoder();
                            geocoder.geocode({
                                latLng: location
                            },
                                function (responses) {
                                    if (responses && responses.length > 0) {
    
                                        infoBubble.setContent(contentString.replace("III", marker.IDD).replace("AAdd", responses[0].formatted_address));
                                        // infoBubble.setContent(contentString.replace("III", marker.IDD).replace("CurrentAddress", responses[0].formatted_address));
                                       
                                    }
                                    else {
                                        // alert("2");
                                        //infoBubble.setContent(contentString.replace("III", marker.IDD));
                                        //  infoBubble.setContent(contentString.replace("III", marker.IDD));
                                    }
                                }
                        );
                            var sv = new google.maps.StreetViewService();
    
                            sv.getPanoramaByLocation(location, 50, function (data, status) {
                                if (status == 'OK') {
                                    // console.log('SV');
                                    contentString = contentString.replace("AAdd", "<img src='https://maps.googleapis.com/maps/api/streetview?size=200x200&location=" + location.lat() + "," + location.lng() + "&fov=90&heading=235&pitch=10%20&key=AIzaSyAdN8sDyYifiM3hAKcnW2ceZ2CoQQ9UEYg' alt='https://maps.googleapis.com/maps/api/streetview?size=200x200&location=" + location.lat() + "," + location.lng() + "&fov=90&heading=235&pitch=10%20&key=AIzaSyAdN8sDyYifiM3hAKcnW2ceZ2CoQQ9UEYg>");
                                }
                                else {
                                    //  console.log('no SV');
                                    //   contentString = ['<div id="tabs">', '<ul>', '<li><a href="#tab-1"><span>Car Info</span></a></li>', '<li><a href="#tab-2"><span>Driver</span></a></li>', '<li><a href="#tab-3"><span>Tab3</span></a></li>', '<li><a href="#tab-4"><span>Address</span></a></li>', '</ul>', '<div id="tab-1">', '<p> ' + Date + '    </p>', '</div>', '<div id="tab-2">', '<p>Tab 2 content</p>', '</div>', '<div id="tab-3">', '<p> Tab3 Data </p>', '</div>', '<div id="tab-4">', '<p>CurrentAddress</p>', '</div>', '</div>'].join('');
    
                                }
                            });
    
                        }
    
                    });
    
                    ////////========================
                    
                    infoBubble.open(map, marker);
    
                });
    
                marker.addListener('rightclick', function (e) {
                    contextMenu.hide();
                    this.clickedMarker_ = this;
                    var overlayProjection = contextMenu.getProjection();
                    var cpx = overlayProjection.fromLatLngToContainerPixel(e.latLng);
                    contextMenu.show(cpx);
    
                    map.setOptions({ draggableCursor: 'pointer' });
    
    
                });
    
                // Hide context menu on several events
    
    
                //var infoWindow = new google.maps.InfoWindow;
                markersArr.push(marker);
    
                //bindInfoWindow(marker, map, infoWindow, html);
    
    
            }

    Marker info Box

    Tuesday, November 15, 2016 6:42 AM

All replies

  • User283571144 posted

    Hi maherKhalil,

    maker position come from database

    each marker have info box with different info

    all working the problem is that the info box show in the place for all the markers

    According to your description, I suggest you could set the InfoBox's position value when create it.

    Since I couldn't see all your codes, I guess you will call placeMarker method somewhere to create multiple markers.

    So I suggest you could try to change the new InfoBox set the position property.

    Like below:

      var infoBubble = new InfoBox({
                    //content: contentString, // Tab content gets appended here.
                    disableAutoPan: false,
                    maxWidth: 0, 
                    pixelOffset: new google.maps.Size(-140, 0),
                    zIndex: null,
                    
                    boxStyle: {
                        //background: "url('tipbox.gif') no-repeat", 
                        opacity: 1,
                        width: "350px"
                    },
                    ,
                    closeBoxMargin: "0px",
                    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                    infoBoxClearance: new google.maps.Size(1, 1),
                    isHidden: false,
                    pane: "floatPane",
                    enableEventPropagation: true
                });
    

    The inforbox api:

    http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/infobox/docs/reference.html

    Best Regards,

    Brando

    Wednesday, November 16, 2016 5:43 AM