resq/templates/job-order/bingmaps.js.twig

<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key={{ bingmaps_api_key|raw }}' async defer></script>
<script>

$(function() {
    var form_in_process = false;
    var searchManager;
    var pin;
    var map = new Microsoft.Maps.Map('#m_gmap', {
        center: new Microsoft.Maps.Location(14.6091, 121.0223),
        culture: 'fil-Latn';
    };
    Microsoft.Maps.Events.addHandler(map, 'click', selectPoint);

    function selectPoint(e) {
        if (e.targetType == "map") {
            var point = new Microsoft.Maps.Point(e.getX(), e.getY());
            var locTemp = e.target.tryPixelToLocation(point);
            var location = new Microsoft.Maps.Location(locTemp.latitude,
                locTemp.longitude)

            map.entities.remove(pin);

            pin = new Microsoft.Maps.Pushpin(location, {
                draggable: false,
                icon: '/assets/images/icon-destination.png'
            });

            map.entities.push(pin);
            map.setCenter(location);

            // set value in hidden input
            $('#map_lat').val(locTemp.latitude);
            $('#map_lng').val(locTemp.longitude);
        }

        map.setCenter(lat, lng);
        map.addMarker({
            lat: lat,
            lng: lng,
            icon: '/assets/images/icon-destination.png'
        });

        // set value in hidden input
        $('#map_lat').val(lat);
        $('#map_lng').val(lng);
    }

    function geocodeQuery(query) {
        var searchRequest = {
            where: query,
            callback: function (r) {
                // clear map
                map.entities.remove(pin);
                // Add the first result
                if (r && r.results && r.results.length > 0) {
                    pin = new Microsoft.Maps.Pushpin(r.results[0].location, {
                        draggable: false,
                        icon: '/assets/images/icon-destination.png'
                    });
                    map.entities.push(pin);
                    map.setCenter(location);

                    // set value in hidden input
                    $('#map_lat').val(locTemp.latitude);
                    $('#map_lng').val(locTemp.longitude);
                }
            },
            errorCallback: function (e) {
                alert("No results found");
            }
        };
    }

    var handleAction = function() {
        var text = $.trim($('#m_gmap_address').val());
        if (!searchManager) {
            // create an instance of the search manager
            Microsoft.Maps.loadModule('Microsoft.Maps.Search', function() {
                searchManager = new Microsoft.Maps.Search.SearchManager(map);
                geocodeQuery(encodeURIComponent(text));
            });
        }
    }

    $('#m_gmap_btn').click(function(e) {
        e.preventDefault();
        handleAction();
    });

    $("#m_gmap_address").keypress(function(e) {
        var keycode = (e.keyCode ? e.keyCode : e.which);
        if (keycode == '13') {
            e.preventDefault();
            handleAction();
        }
    });

    {% if ftags.set_map_coordinate %}
        // check if we need to set map
        var location = new Microsoft.Maps.Location({{ obj.getCoordinates.getLatitude }}, {{ obj.getCoordinates.getLongitude }});

        map.entities.remove(pin);

        pin = new Microsoft.Maps.Pushpin(location, {
            draggable: false,
            icon: '/assets/images/icon-destination.png'
        });

        map.entities.push(pin);
        map.setCenter(location);

        // set value in hidden input
        $('#map_lat').val(locTemp.latitude);
        $('#map_lng').val(locTemp.longitude);
        
        // remove placeholder text
        $("[data-vehicle-field='1']").prop('placeholder', '');
    {% endif %}

    {% if mode in ['update-processing', 'update-reassign-hub'] %}
        // display hub map
        var hmap = new Microsoft.Maps.Map('#hub_map', {
            center: new Microsoft.Maps.Location({{ obj.getCoordinates.getLatitude }},
                {{ obj.getCoordinates.getLongitude }}),
            culture: 'fil-Latn';
        };   

        var dest = new Microsoft.Maps.Location({{ obj.getCoordinates.getLatitude }},
            {{ obj.getCoordinates.getLongitude }});
        hmap.entities.push(new Microsoft.Maps.Pushpin(dest, {
            title: "Destination",
            text: "Destination",
            icon: '/assets/images/icon-destination.png'
            })
        );

        {% for hub in hubs %}
            hmap.addMarker({
                lat: {{ hub.hub.getCoordinates.getLatitude }},
                lng: {{ hub.hub.getCoordinates.getLongitude }},
                title: "{{ hub.hub.getName }}",
                content: "{{ hub.hub.getName }}",
                        icon: '/assets/images/icon-outlet.png'
            });
        {% endfor %}

    {% endif %}