Google Map and Markers

sticcino · Post by **sticcino** » Sun Jul 14, 2024 12:10 am

Hello,

had this code in v2023 on a list page that as a gmap object..

            if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        const latitude = position.coords.latitude;
                        const longitude = position.coords.longitude;
                        var myLatlng = new google.maps.LatLng(latitude, longitude);                                                    
                        const image = "images/mapiconscollection-markers/you-are-here-2.png";
                        var map = $("#mp_GOHERE_POILocations_id").data("map");
                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            title: "Current Location",
                            icon: image, 
                        });
                        marker.setMap(map);
                        map.setZoom(9);
                        map.setCenter(marker.getPosition());
                    });
            } else {

altered the code to support the new AdvancedMarkerElement as:

            if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        const latitude = position.coords.latitude;
                        const longitude = position.coords.longitude;
                        var myLatlng = new google.maps.LatLng(latitude, longitude);                                                    
                        var map = $("#mp_washrooms_id").data("map");
                        var marker = new google.maps.marker.AdvancedMarkerElement({
                            map,
                            position: { lat: latitude, lng: longitude },
                            title: "Current Location",
                        });                          
                        marker.setMap(map);
                        map.setZoom(9);
                        map.setCenter(marker.position);
                    });
            } else {

the only quirk is the icon: image attribute is not valid to show our custom you are here... icon.
does anyone have a refernce to a replacement or usage

thanks,

sticcino · Post by **sticcino** » Sun Jul 14, 2024 12:20 am

figure it out

        $(document).on("map", (e, args) => {
            args.marker.icon = "images/mapiconscollection-markers/latrine.png";
            if (navigator.geolocation) {
**                    const yah = document.createElement("img");**
**                    yah.src = "images/mapiconscollection-markers/you-are-here-2.png";**
            
                    navigator.geolocation.getCurrentPosition(function(position) {
                        const latitude = position.coords.latitude;
                        const longitude = position.coords.longitude;
                        var myLatlng = new google.maps.LatLng(latitude, longitude);                                                    
                        var map = $("#mp_washrooms_id").data("map");
                        var marker = new google.maps.marker.AdvancedMarkerElement({
                            map,
                            position: { lat: latitude, lng: longitude },
                            title: "Current Location",
**                            content: yah, **
                        });                          
                        marker.setMap(map);
                        map.setZoom(9);
                        map.setCenter(marker.position);
                    });
            } else {
                console.log("Geolocation is not supported by this browser.");
            }

but just noticed that the custom icon for the points is not working... args.marker.icon = "images/mapiconscollection-markers/latrine.png";
any thoughts as to why that would change?

sticcino · Post by **sticcino** » Sun Jul 14, 2024 12:33 am

ok, it was set to pull from my poi_Icon field in the table, which they were all blank.. updating to "images/mapiconscollection-markers/latrine.png" and the custom icon is displayed...

sticcino · Post by **sticcino** » Sun Jul 14, 2024 4:22 am

Hi,

our app pulls the sites icon and stores it in the table. when the maps displays it displays the icon but its a little too large. for example this icon: https://maps.gstatic.com/mapfiles/place ... bar-71.png is a sample of an icon we would pull.

but we're struggling on how to tell AdvancedMarkerElement to make it smaller, we can't find the attribute to size it

thanks

sticcino · Post by **sticcino** » Sun Jul 14, 2024 7:51 am

Is it possible to pass a filter value to the map data selection object?

i only want to map locations from my table where status = OPEN

arbei · Post by **arbei** » Sun Jul 14, 2024 10:20 am

Regarding icon size, you may add your CSS styles, read Place Icons.
Since you have added your handler for the "map" event, you may add more code to decide if you want to add the marker or not. You may pass the status via one of the xxx_field (e.g. description_field), get the status back in your code from data.xxx and then remove it.