mapsplugin / cordova-plugin-googlemaps

Google Maps plugin for Cordova
Apache License 2.0
1.66k stars 918 forks source link

How to create marker object without adding to any map? #1715

Closed Feargalicious closed 7 years ago

Feargalicious commented 7 years ago

I'm submitting a ... (check one with "x") [x] question [ ] any problem or bug report [ ] feature request

The plugin version: (check one with "x") [ ] 1.4.x [x] 2.0.0-beta3

cordova information: (run $> cordova plugin list)

cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-device-orientation 1.0.7 "Device Orientation"
cordova-plugin-email 1.2.6 "EmailComposer"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-globalization 1.0.7 "Globalization"
cordova-plugin-googlemaps 2.0.0-beta3-20170905-0026 "cordova-plugin-googlemaps"
cordova-plugin-inappbrowser 1.7.1 "InAppBrowser"
cordova-plugin-network-information 1.3.3 "Network Information"
cordova-plugin-splashscreen 4.0.3 "Splashscreen"
cordova-plugin-statusbar 2.2.3 "StatusBar"
cordova-plugin-vibration 2.1.5 "Vibration"
cordova-plugin-whitelist 1.3.2 "Whitelist"
cordova.plugins.diagnostic 3.6.4 "Diagnostic"

Hi there, I was wondering how to create a marker object on its own. I wish to add a list of markers to an array without adding them to the map yet, I could set their visibility to false when I create them but that is not ideal as I will have to change many functions. Any help would be greatly appreciated.

Here is my code (quite long sorry).

Related code, data or error log (please format your code or data):

    <script>
    //basically want this to work, im converting the normal js gmaps to work with this plugin instead (because its great)
    marker = new VehicleMarker({
        position: new google.maps.LatLng(Vehicle.latitude, Vehicle.longitude),
        map: map,
        icon: {
            url: carName
        },
        label: {
            text: Vehicle.registration,
            fontWeight: 'bold',
            fontSize: '10px',
            fontFamily: '"Arial", Courier,Monospace',
            color: 'black',
            background: 'white'
        }

    });
     //where VehicleMarker is:

     function VehicleMarker() {
        google.maps.Marker.apply(this, arguments);  //changed to plugin.google.maps.Marker.apply
        this.trackerId = '';
        this.vehicleId = '';
        this.registration = '';
        this.description = '';
        this.model = '';
        this.make = '';
        this.latitude = '';
        this.longitude = '';
        this.aquisitionTime = '';
        this.angle = '';
        this.speed = '';
        this.mileage = '';
        this.fuel_type = '';
        this.engine = '';
        this.visibleSatellites = '';
        this.dins = '';
        this.type = '';
    }

    //what I have so far:
    //Vehicles is an array of vehicle with variables like latitude,longitude,direction,ignition,speed etc.

    function initMarkers() {
        singleVehicle = false;

        clearOverlays();
        var newBoundary = new plugin.google.maps.LatLngBounds();
        Vehicles.forEach(function (Vehicle) {
            var latLng = new plugin.google.maps.LatLng(Vehicle.latitude,Vehicle.longitude);
            if (Vehicle.latitude !== undefined && Vehicle.longitude !== undefined) {
                newBoundary.extend(latLng);
            }
        });
        map.setCameraTarget(newBoundary.getCenter());

        Vehicles.forEach(function (Vehicle) {
            if (Vehicle.latitude !== undefined && Vehicle.longitude !== undefined) {
                var vehicleIcon = getVehicleIcon(Vehicle.engine, Vehicle.angle, Vehicle.type, Vehicle.aquisitionTime);
                var marker = createMarker(Vehicle, vehicleIcon);
                gmarkers.push(marker); //want this to be an array of markers, then these marker objects are put into another object with the added vehicle variables
                setValuesToMarker(marker, Vehicle); //add the vehicle variables to the marker   
            }
        });

        if (clustering) {
            //markerCluster = new MarkerClusterer(gmarkers, {imagePath: 'img/m', maxZoom: 16}); //have yet to change this, gmarkers isnt working yet
        }
        vehicleAutoComplete(); //function to print list of all vehicles
        progress = false;
    }

    function createMarker(Vehicle, vehicleIcon) {   //create marker at vehicle's lat and lng with icon of the relevent type
        if(vehicleIcon === "icons/green/default.gif" || vehicleIcon === "icons/red/default.gif" || vehicleIcon === "icons/poor_gsm.gif"){

            marker = new VehicleMarker({
                position: {lat: Vehicle.latitude, lng: Vehicle.longitude},
                icon: {
                    url: vehicleIcon
                },
                label: {
                    text: Vehicle.registration,
                    fontWeight: 'bold',
                    fontSize: '10px',
                    fontFamily: '"Arial", Courier,Monospace',
                    color: 'black',
                    background: 'white'
                }

            });
        }else{  //just else for the other type of icon, so its centered properly, can ignore
            marker = new VehicleMarker({
                position: {lat: Vehicle.latitude, lng: Vehicle.longitude},
                icon: {
                    url: vehicleIcon,
                    labelOrigin: new google.maps.Point(33, 9),
                    size: new google.maps.Size(32, 32),
                    // The origin for this image is (0, 0).
                    origin: new google.maps.Point(0, 0),
                    // The anchor for this image is the base of the flagpole at (0, 32).
                    anchor: new google.maps.Point(16, 16)
                },
                label: {
                    text: Vehicle.registration,
                    fontWeight: 'bold',
                    fontSize: '10px',
                    fontFamily: '"Arial", Courier,Monospace',
                    color: 'black',
                    background: 'white'
                }

            });
        }
        return marker;
    }
wf9a5m75 commented 7 years ago

Not possible.