coderedcms/static/coderedcms/js/codered-maps.js
// Initialize the map on the gooogle maps api js callback.
Initialize the map on the gooogle maps api js callback.
Initialize the map on the gooogle maps api js callback .
function initMap() {
    const map = new google.maps.Map(document.querySelector('#cr-map'), {
        zoom: parseInt($("#cr-map").data("zoom")),
        center: {
            lat: parseFloat($("#cr-map").data("latitude")),
            lng: parseFloat($("#cr-map").data("longitude")),
        },
        mapTypeControl: $("#cr-map").data("map-type-control"),
        streetViewControl: $("#cr-map").data("street-view-control"),
    });
    var infowindow = new google.maps.InfoWindow({});
    if (navigator.geolocation) {
        var currentLocationControlDiv = document.createElement('div');
        var currentLocation = new CurrentLocationControl(currentLocationControlDiv, map);
        currentLocationControlDiv.index = 1;
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(currentLocationControlDiv);
    }
    google.maps.event.addListener(map, 'idle', () => {
        const sw = map.getBounds().getSouthWest();
        const ne = map.getBounds().getNorthEast();
        let locationDataFeatures = [];
        map.data.loadGeoJson(
            $("#cr-map").data("geojson-url") + `&viewport=${sw.lat()},${sw.lng()}|${ne.lat()},${ne.lng()}`,
            null,
            features => {
                locationDataFeatures.forEach(dataFeature => {
                    map.data.remove(dataFeature);
                });
                locationDataFeatures = features;
                if ($("#cr-map").data("show-list") == "True") {
                    updateList(locationDataFeatures);
                }
            }
        );
    });
    map.data.addListener('click', ev => {
        const f = ev.feature;
        infowindow.setContent(f.getProperty('pin_description'));
        infowindow.setPosition(f.getGeometry().get());
        infowindow.setOptions({
            pixelOffset: new google.maps.Size(0, -30)
        });
        infowindow.open(map);
    });
    if ($("#cr-map").data("show-search") == "True") {
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
        map.addListener('bounds_changed', function () {
            searchBox.setBounds(map.getBounds());
        });
        searchBox.addListener('places_changed', function () {
            var places = searchBox.getPlaces();
            if (places.length == 0) {
                return;
            }
            var bounds = new google.maps.LatLngBounds();
            places.forEach(function (place) {
                if (!place.geometry) {
                    return;
                }
                if (place.geometry.viewport) {
                    bounds.union(place.geometry.viewport);
                } else {
                    bounds.extend(place.geometry.location);
                }
            });
            map.fitBounds(bounds);
        });
    }
    function updateList(features) {
        new_html = "";
        if (features.length == 0) {
            $("#LocationList").hide();
            $("#LocationListEmpty").show();
        } else {
            $("#LocationList").show();
            $("#LocationListEmpty").hide();
            for (i = 0; i < features.length; i++) {
                feature = features[i];
                new_html += feature.getProperty('list_description');
            }
        }
        $("#LocationList").html(new_html);
    }
}
function initMap ( ) { const map = new google . maps . Map ( document . querySelector ( '#cr-map' ) , { zoom : parseInt ( $ ( "#cr-map" ) . data ( "zoom" ) ) , center : { lat : parseFloat ( $ ( "#cr-map" ) . data ( "latitude" ) ) , lng : parseFloat ( $ ( "#cr-map" ) . data ( "longitude" ) ) , } , mapTypeControl : $ ( "#cr-map" ) . data ( "map-type-control" ) , streetViewControl : $ ( "#cr-map" ) . data ( "street-view-control" ) , } ) ; var infowindow = new google . maps . InfoWindow ( { } ) ; if ( navigator . geolocation ) { var currentLocationControlDiv = document . createElement ( 'div' ) ; var currentLocation = new CurrentLocationControl ( currentLocationControlDiv , map ) ; currentLocationControlDiv . index = 1 ; map . controls [ google . maps . ControlPosition . TOP_LEFT ] . push ( currentLocationControlDiv ) ; } google . maps . event . addListener ( map , 'idle' , ( ) => { const sw = map . getBounds ( ) . getSouthWest ( ) ; const ne = map . getBounds ( ) . getNorthEast ( ) ; let locationDataFeatures = [ ] ; map . data . loadGeoJson ( $ ( "#cr-map" ) . data ( "geojson-url" ) + ` ${ sw . lat ( ) } ${ sw . lng ( ) } ${ ne . lat ( ) } ${ ne . lng ( ) } ` , null , features => { locationDataFeatures . forEach ( dataFeature => { map . data . remove ( dataFeature ) ; } ) ; locationDataFeatures = features ; if ( $ ( "#cr-map" ) . data ( "show-list" ) == "True" ) { updateList ( locationDataFeatures ) ; } } ) ; } ) ; map . data . addListener ( 'click' , ev => { const f = ev . feature ; infowindow . setContent ( f . getProperty ( 'pin_description' ) ) ; infowindow . setPosition ( f . getGeometry ( ) . get ( ) ) ; infowindow . setOptions ( { pixelOffset : new google . maps . Size ( 0 , - 30 ) } ) ; infowindow . open ( map ) ; } ) ; if ( $ ( "#cr-map" ) . data ( "show-search" ) == "True" ) { var input = document . getElementById ( 'pac-input' ) ; var searchBox = new google . maps . places . SearchBox ( input ) ; map . controls [ google . maps . ControlPosition . TOP_LEFT ] . push ( input ) ; map . addListener ( 'bounds_changed' , function ( ) { searchBox . setBounds ( map . getBounds ( ) ) ; } ) ; searchBox . addListener ( 'places_changed' , function ( ) { var places = searchBox . getPlaces ( ) ; if ( places . length == 0 ) { return ; } var bounds = new google . maps . LatLngBounds ( ) ; places . forEach ( function ( place ) { if ( ! place . geometry ) { return ; } if ( place . geometry . viewport ) { bounds . union ( place . geometry . viewport ) ; } else { bounds . extend ( place . geometry . location ) ; } } ) ; map . fitBounds ( bounds ) ; } ) ; } function updateList ( features ) { new_html = "" ; if ( features . length == 0 ) { $ ( "#LocationList" ) . hide ( ) ; $ ( "#LocationListEmpty" ) . show ( ) ; } else { $ ( "#LocationList" ) . show ( ) ; $ ( "#LocationListEmpty" ) . hide ( ) ; for ( i = 0 ; i < features . length ; i ++ ) { feature = features [ i ] ; new_html += feature . getProperty ( 'list_description' ) ; } } $ ( "#LocationList" ) . html ( new_html ) ; } }
Initialize the map on the gooogle maps api js callback.
Initialize the map on the gooogle maps api js callback .
// Set defaults // Create an infowindow object. // Listener to update the map markers when the map is idling. // Listener to update the info window when a marker is clicked. // Logic to create a search box and move the map on successful search. // For each place, get the icon, name and location. // Only geocodes have viewport. // Updates the list to the side of the map with markers that are in the viewport.