Pin not dropped when address is searched for and added

**kwood30** · 12-11-2017, 10:36 AM

I have managed to put together aload of coding to be able to assign a pin, along with time and reference to a searched address, but for some reason when I search the addres it works fine but it fails to drop a pin when assigned. I have attached all my code etc below. I cannot see what is stopping it to work. Any help will be appreciated. many thanks

Code:

 $('#controls').on('click change', function () {
            // This can take a while to load so only return if defined
            if (typeof ($('#counties').get(0)) != "undefined")
                $('#counties').get(0).selectedIndex = 0;
        });

        $('#overhere').on('change', '#counties', function () {
            var v = this.value;
            if (!v) { return; }
            $('#lastcounty').html('Most Recent: ' + v);
            var bounds = new google.maps.LatLngBounds();
            if (v === 'Isles of Scilly') {
                bounds.extend(new google.maps.LatLng(49.938074, -6.303835));
                map.fitBounds(bounds);
                map.setZoom(11);
                return;
            }
            var poly = pollies[v].latLngs.j[0].j, i = poly.length;
            while (--i > -1) {
                bounds.extend(poly[i]);
            }
            map.fitBounds(bounds);
            if (v === 'Bristol, City of') { map.setZoom(10); }
        });

        $('#overhere').on('click', '#togglecounties', function () {
            this.disabled = true;
            $('#counties').get(0).selectedIndex = 0;
            var t = this, i = polAr.length, how = ScillyPollies[0].map ? null : map, poly;
            //	if(ScillyPollies[0].infowindow.map){ScillyPollies[0].infowindow.close();}
            while (--i > -1) {
                poly = polAr[i];
                !how && poly.infowindow && poly.infowindow.map && poly.infowindow.close();
                poly.setMap(how);
            }
            setTimeout(function () { t.disabled = false; }, 400);
        });
        <%--
            Creates the marker. Adds a timer on the marker to show how long it is on there for.
            Handles a click event to open up dialog.
            Will change timer to date and time added as this will be easier to do as getting data from table
        --%>
        function createMarker(latlng, html, map, reference) {
            if (markers[html]) { return false; }
            var ref = reference;
            infowindow = new google.maps.InfoWindow({
                content: ref || html
            }),
            marker = new google.maps.Marker({
                map: map,
                time: new Date(),
                position: latlng,
                html: html,
                icon: defaultPin,
                infowindow: infowindow
            }),
            $tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
            $tm.get(0).selectedIndex = 0;
            marker.addListener('mouseover', function () {
                clearInterval(infowindow.timer);
                infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
                $('#supplementwindow').html(infowindow.content).fadeIn();
                infowindow.timer = setInterval(function () {
                    infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
                    $('#supplementwindow').html(infowindow.content);
                }, 300);
                infowindow.open(map, this);
            });
            marker.addListener('mouseout', function () {
                clearInterval(infowindow.timer);
                infowindow.close();
                $('#supplementwindow').fadeOut();
            });
            marker.addListener('click', function () {
                var oe = this.optel;
                $tm.get(0).selectedIndex = $('option', $tm).index(oe);
                $tm.trigger('change');
            });
            marker.optel = $('option', $tm).last();
            $tm.get(0).size = $('option', $tm).length;
            markers[html] = marker;

            //We want to return true as we have successfully created a marker.
            return true;
        }


        $('form').submit(function (e) {
            var address = $('#<%=tbAddress.ClientID%>', this).val();
            var reference = $('#<%=referenceTxt.ClientID%>').val();
            var information = $('#<%=informationTxt.ClientID%>').val();

            if (address) {
                geocoder.geocode({
                    'address': address
                }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);

                        //if (createMarker(results[0].geometry.location, address, map, reference)) {
                        <%--Commented out as it does not go to the new marker.--%>
                        //bounds.extend(results[0].geometry.location);
                        //map.fitBounds(bounds);
                            <%--Zoom level. 21 max zoom level--%>
                        map.setZoom(18);
                        var toLoadOnServer = {
                            Location: results[0].formatted_address,
                            Longitude: results[0].geometry.location.lng(),
                            Latitude: results[0].geometry.location.lat(),
                            NameNumber: results[0].address_components[0].long_name,
                            Street: results[0].address_components[1].long_name,
                            Town: results[0].address_components[2].long_name,
                            //PostCode: (results[0].address_components[7].long_name === undefined) ? '': results[0].address_components[7].long_name,
                            Reference: reference,
                            Information: information,
                        };

                        AjaxPostToAddMarker(toLoadOnServer);
                        markers = [];
                        LoadMarkersFromServer();

                        //} else {
                        //    alert(address + ' or another marker with the same location already exists! Skipping.');
                        //}

                    }
                    else {
                        alert("Geocode was not successful for the following reason: " + status);
                    }
                });
            }
            e.preventDefault();
        });

        function AjaxPostToAddMarker(ToLoadOntoServer) {
            $.ajax({
                type: "POST",
                url: "Tasking.aspx/AddDataToServer",
                data: JSON.stringify({ 'address': ToLoadOntoServer }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    //alert(data.d);
                },
                error: function () {
                    alert("Could not create marker in server. Please try again.");
                }
            })
        }
        //Have to double do this to make sure google api is loaded first. So first one makes sure the page has loaded. Then it will make sure the document is ready.
        window.onload = function () {
            LoadMarkersFromServer();

            //Once this div has been created call this function. Stops the elements not being found or == null
            $('#locationDiv').ready(function () {
                google.maps.event.addDomListener(window, 'load', SetAutoAddressExtender('<%=tbSearchAddress.ClientID%>', '<%=tbAddress.ClientID%>'))
            });
        }

        

        
        function LoadMarkersFromServer() {
            $(document).ready(function () {
                $.ajax({
                    type: "POST",
                    url: "Tasking.aspx/GetMarkersFromServer",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        LoadMarkersFromFile(data.d);
                    },
                    failure: function () {
                        alert("Failed");
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(xhr.responseText);
                    }
                });
            });
        }

        $('#activatemarker').click(function () {
            //If the job window is not visible we do not want to allow this to work.
            if (!$('#supplementwindow').is(":visible"))
                return;

            var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), m = $o.val();
            if (!m) { return; }

            markers[m].setIcon(pinImage);

            var supplementWindow = $('#supplementwindow');

            var stringToPass = supplementWindow[0].innerHTML;

            if (stringToPass == null)
                return;

            $.ajax({
                type: "POST",
                url: "Tasking.aspx/AllocateJob",
                data: "{ 'markerCaption': '" + stringToPass + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (!data.d)
                        alert("This job has already allocated");
                    else {
                        //Clears the array to load again from server
                        markers = [];
                        LoadMarkersFromServer();
                        //Fades out the window
                        $('#supplementwindow').hide();
                    }
                },
                error: function () {
                    alert("Could not Allocate and create form. Please try again.");
                }
            })
        });

        $('#removemarker').click(function () {
            var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), m = $o.val(), n;
            if (!m) { return; }
            markers[m].setMap(null);
            delete markers[m];
            $o.remove();
            tm.get(0).selectedIndex = 0;
            bounds = new google.maps.LatLngBounds();
            if ((n = $('option', tm).length) > 1) {
                $.each(markers, function (i, v) {
                    bounds.extend(v.position);
                });
                map.fitBounds(bounds);
            }
            if (n < 3) {
                map.setZoom(n > 1 ? 13 : 8);
            }
            tm.get(0).size = n;
        });
        $('#themarkers').change(function () {
            this.title = this.options[this.options.selectedIndex].title;
            var m = this.value;
            if (!m) { return; }
            map.setCenter(markers[m].position);
            map.setZoom(18);
            this.size = $('option', $(this)).length;
        });
        $('#showall').click(function () {
            var $tm = $('#themarkers'), n = $('option', $tm).length - 1;
            $tm.get(0).selectedIndex = 0;
            if (!n) {
                map.setCenter(new google.maps.LatLng(52.178227, -0.4013));
                map.setZoom(8);
                return;
            }
            map.fitBounds(bounds);
            if (n === 1) {
                map.setZoom(8);
            }
        });

    </script>

**jscheuer1** · 12-12-2017, 02:32 PM

Could you possibly explain more of what this is about? I don't even know what you mean by a pin. Is that like a number? And does dropping it mean erasing it or what?

**kwood30** · 12-13-2017, 10:24 AM

Hi John,

Thank you for your response.

What should be happening is:

You search for a location using the post code mainly, Then once the address is located, a reference and extra information can be added, once all this has been file and submitted a 'pin' will appear on the map at the entered location, displaying the reference, information and also date created and time elapsed from creation of the 'pin'.

Hopefully this makes more sense.

**jscheuer1** · 12-13-2017, 08:36 PM

Thanks for that. I get the idea now. I think it would be best if I also had a link to the page or could at least see the HTML involved. You can post a link here, or PM it to me. If you're not live yet, please post the page's HTML code - at least those parts of it that relate to this issue. I might need the code of server side pages (if any - looks like there might be one or more) that relate to this as well.

**kwood30** · 12-19-2017, 10:11 AM

Sorry it has been a while in getting back to you. Just been busy with the festive period coming up.

I have PM you the rest of the code. Thanks

**kwood30** · 01-24-2018, 10:07 AM

Has anyone got any ideas on what I am missing? I can't seem to work it out. Thank you

**kwood30** · 02-05-2018, 10:12 AM

Originally Posted by jscheuer1

Thanks for that. I get the idea now. I think it would be best if I also had a link to the page or could at least see the HTML involved. You can post a link here, or PM it to me. If you're not live yet, please post the page's HTML code - at least those parts of it that relate to this issue. I might need the code of server side pages (if any - looks like there might be one or more) that relate to this as well.

Hi,

I have PM'd you a couple of times with what you have asked for....I am really stuck on this and would honestly appreciate your help.....If you can't please just let me know. Many thanks