-1

I'm stuck on this problem, no matter what I have tried, I cannot add a url to the google maps marker.

Can anyone with more experience than me please help with this problem.

Currently, if I click the marker, I'm taking back to the home page, what I want is to go to this url '/Hotel/Full-Details?=@item.DisplayHotelName&propId=@item.HotelId'which is in the foreach loop.

I have looked at

google map api: open url by clicking at marker

Google Map marker url

and other but i'm stuck

My code is:

<script type="text/javascript">
                    $(function() {
                        var map;
                        var markersArray = [];
                        var image = 'img/';
                        var bounds = new window.google.maps.LatLngBounds();
                        var loc;
                        //var pageUrl;

                        var mapOptions = { mapTypeId: window.google.maps.MapTypeId.ROADMAP };
                        map = new window.google.maps.Map(document.getElementById("dvMap"), mapOptions);

                        @foreach (var item in Model.DisplayHotelPaging)
                        {
                            <text> loc = new google.maps.LatLng(@item.Latitude, @item.Longitude);
                        bounds.extend(loc);
                        addMarker(loc, '@item.DisplayHotelName @item.Address1 @item.PostalCode', "active",'/Hotel/Full-Details?=@item.DisplayHotelName&propId=@item.HotelId')
                        </text>
                        }


                        map.fitBounds(bounds);
                        map.panToBounds(bounds);

                        //for (var i = 0; i < window.addMarker.length; i++) {
                        function addMarker(location, name, active) {
                            //var page = loc[i];
                            var marker = new google.maps.Marker({
                                position: location,
                                map: map,
                                title: name,
                                status: active,
                                icon: '/Images/property1.png',
                                url: '/'//page[3]
                            });
                            // }

                            window.google.maps.event.addListener(marker, 'click', function() {
                                window.location.href = marker.url;
                            });

                        }
                    });
                </script>

Thanks for any help

Community
  • 1
  • 1
George Phillipson
  • 830
  • 11
  • 39

1 Answers1

1

I believe you need to add the URL to your addMarker function like so:

                       function addMarker(location, name, active, markerUrl) {
                        //var page = loc[i];
                        var marker = new google.maps.Marker({
                            position: location,
                            map: map,
                            title: name,
                            status: active,
                            icon: '/Images/property1.png',
                            url: markerUrl
                        });
                        // }

                        window.google.maps.event.addListener(marker, 'click', function() {
                            window.location.href = marker.url;
                        });

                    }

Currently you hard-coded '/' as your URL which would take you to your home page.

Will
  • 2,790
  • 19
  • 22
  • Hi DenimChicken, thanks, i'm positive i tried that earlier and only got a gray div. So I must have been doing something else at the same time which was breaking the code. Once again thanks – George Phillipson Oct 15 '14 at 14:45