Switch markers on map based on attributes

Hi
I am pulling results from a db which i then plot on a map. I want to show different markers based on price. If this is a subset of the recordset:
var locations = [['Everyone Active Hartham Leisure Centre', 51.800052, -0.077467], 4.2],
['Gordons Gym', 51.480226, 0.069589], 3.5],
                ['The Concorde Club', 51.48808, -0.40301], 4.5],
                ['Croydon High Sports Club', 51.341246, -0.061708], 4.5],
                ['Everyone Active Northolt Leisure Centre', 51.548934, -0.375026], 3.9],
                ['Everyone Active Central Park Leisure Centre', 51.602689, 0.228719], 3.8],

Open in new window


I have done the following:
var image_low = "http://localhost/recharge/images/mapicons/blue_MarkerA.png", image_med = "http://localhost/recharge/images/mapicons/green_MarkerL.png", image_high = "http://localhost/recharge/images/mapicons/orange_MarkerC.png";

...
...

            for (i = 0; i < locations.length; i++) {
                if (int(Locations[i][3]) < 5) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        icon: image_low
                    }
                else if (int(Locations[i][3]) > 10 {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        icon: image_high
                    }
                else{
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        icon: image_med
                    }
                });

Open in new window


Now the map doesn't appear! What do you suggest?

thanks
lz7cjcAsked:
Who is Participating?
 
Robert SchuttSoftware EngineerCommented:
Use Math.round to get a whole number (Math.floor if you always want to round down).

Locations should not use uppercase L looking at the definition above it.

Still a couple of problems with ( { } ), some editors offer functionality: "show matching bracket" that could help, for example press Control+]

Correct indentation can also be a big help.

this should do the trick:
        if (Math.round(locations[i][3]) < 5) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: image_low
            });
        }
        else if (Math.round(locations[i][3]) > 10) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: image_high
            });
        }
        else {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: image_med
            });
        }

Open in new window

Another option would be to use a ternary operator (since most of the code is the same for all 3 options):
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: (Math.round(locations[i][3]) < 5) ? image_low : ((Math.round(locations[i][3]) > 10) ? image_high : image_med)
        });

Open in new window

0
 
lz7cjcAuthor Commented:
was missing some {} but still not working
            for (i = 0; i < locations.length; i++) {
                if (int(Locations[i][3]) < 5) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        icon: image_low
                    }
                }
                else if (int(Locations[i][3]) > 10 {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        icon: image_high
                    }
                }
                else {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        icon: image_med
                    }
                }
                });

Open in new window

0
 
lz7cjcAuthor Commented:
and found another trailing one that shouldn't be there:
            for (i = 0; i < locations.length; i++) {
                if (int(Locations[i][3]) < 5) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        icon: image_low
                    }
                }
                else if (int(Locations[i][3]) > 10) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        icon: image_high
                    }
                }
                else {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                        map: map,
                        icon: image_med
                    }
                }
                );

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
lz7cjcAuthor Commented:
ok - so i have checked my various brackets and think i have it correct. This is the full code and I get an empty map div i.e. blank page.

If I swap back to the single map without the if...else if.... then it work fine

       
<body>
...
.... 
<!--mapping -->
    <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <style>

        #map {
            height: 400px;
            width: 700px;
        }

    </style>

            <script>

            ['The Gym Way Kensington', 51.494474, -0.190661, 2],
                    ['The Circle Gym and Spa', 51.501491, -0.074497, 2.5],
                    ['Urban Kings', 51.531326, -0.122057, 25],
                    ['Springhealth Hampstead', 51.546273, -0.16419, 6],
                    ['Blue Harbour Health Club &amp; Spa', 51.475699, -0.182001, 8],
                    ['Cedars Leisure Club', 51.451782, -0.297184, 9],
                    ['The Landmark Spa and Health Club', 51.521554, -0.161116, 40],
                    ['Brands Hatch Place Hotel and Spa', 51.361902, 0.269406, 30],
                    ];

          var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                var center;
                navigator.geolocation && navigator.geolocation.getCurrentPosition(showPosition, showError) == undefined && showError();

                var infowindow = new google.maps.InfoWindow();
                var directionsService = new google.maps.DirectionsService();
                var directionsDisplay = new google.maps.DirectionsRenderer();
                directionsDisplay.setMap(map);

                var marker, i, image_low = "http://localhost/recharge/images/mapicons/green_MarkerS.png", image_med = "http://localhost/recharge/images/mapicons/orange_MarkerB.png", image_high = "http://localhost/recharge/images/mapicons/paleblue_MarkerF.png";


                for (i = 0; i < venues.length; i++) {

                    <!--choose a marker based on price for the location -->
                    if (Math.floor(venues[i][3]) < 5) {
                        marker = new google.maps.Marker({
                            position: new google.maps.LatLng(venues[i][1], venues[i][2]),
                            map: map,
                            icon: image_low
                        });
                    }
                    else if (Math.floor(venues[i][3]) > 10) {
                        marker = new google.maps.Marker({
                            position: new google.maps.LatLng(venues[i][1], venues[i][2]),
                            map: map,
                            icon: image_high
                        });
                    }
                    else {
                        marker = new google.maps.Marker({
                            position: new google.maps.LatLng(venues[i][1], venues[i][2]),
                            map: map,
                            icon: image_med
                        });
                    }


                google.maps.event.addListener(marker, 'click', (function (marker, i) {
                        return function () {
                        infowindow.setContent(venues[i][0] + '<br/><a href="javascript:calcRoute(' + i + ')">How do I get there?</a>');
                        infowindow.open(map, marker);
                    }
                })(marker, i));
                }

                function calcRoute(i) {
                    infowindow.close(); // optional
                    var request = {
                        origin: center, // only useful when we did get a current location...
                        destination: new google.maps.LatLng(venues[i][1], venues[i][2]),
                        travelMode: google.maps.TravelMode.WALKING
                    };
                    directionsService.route(request, function (response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response);
                        }
                    });
                }

                function showPosition(position) {
                    lat = position.coords.latitude;
                    lon = position.coords.longitude;
                    latlon = new google.maps.LatLng(lat, lon);
                    map.setCenter(center = latlon);

                }

                function showError(error) {
                    map.setCenter(center = new google.maps.LatLng(venues[0][1], venues[0][2])); // default 1st from array
                }

            </script>
            <div id="map"></div>

Open in new window

0
 
Robert SchuttSoftware EngineerCommented:
For starters, the array is not assigned to a variable at all in this version ;-)
0
 
lz7cjcAuthor Commented:
that was a copy//paste mistake
it should have read:

var venues =          ['The Gym Way Kensington', 51.494474, -0.190661, 2],
                    ['The Circle Gym and Spa', 51.501491, -0.074497, 2.5],
                    ['Urban Kings', 51.531326, -0.122057, 25],
                    ['Springhealth Hampstead', 51.546273, -0.16419, 6],
                    ['Blue Harbour Health Club &amp; Spa', 51.475699, -0.182001, 8],
                    ['Cedars Leisure Club', 51.451782, -0.297184, 9],
                    ['The Landmark Spa and Health Club', 51.521554, -0.161116, 40],
                    ['Brands Hatch Place Hotel and Spa', 51.361902, 0.269406, 30],
                    ];

Open in new window

0
 
Robert SchuttSoftware EngineerCommented:
Still 1 opening [ missing after the =
0
 
lz7cjcAuthor Commented:
i switched locations for venues as the upper/lowercase L was doing my head in!
0
 
lz7cjcAuthor Commented:
yup got that one as well - sorry... was trying to edit out the python so you had the actual array

The problem appears to be with the price variable... when it wasn't in the array and I used
 
var locations =  [['Everyone Active Hartham Leisure Centre', 51.800052, -0.077467],
        ['Gordons Gym', 51.480226, 0.069589],
        ['The Concorde Club', 51.48808, -0.40301],
        ['Croydon High Sports Club', 51.341246, -0.061708],
        ['Everyone Active Northolt Leisure Centre', 51.548934, -0.375026],
        ['Everyone Active Central Park Leisure Centre', 51.602689, 0.228719],
 ['The Landmark Spa and Health Club', 51.521554, -0.161116],
        ['Brands Hatch Place Hotel and Spa', 51.361902, 0.269406],
        ];


       marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: (Math.round(locations[i][3]) < 5) ? image_low : ((Math.round(locations[i][3]) > 10) ? image_high : image_med)
        });

Open in new window


I got the medium marker appearing throughout, presumably because the statement defaults to the last condition if empty.

 When I add price to my array the map no longer appears at all.
var locations =  [['Everyone Active Hartham Leisure Centre', 51.800052, -0.077467, 4.2],
        ['Gordons Gym', 51.480226, 0.069589, 3.5],
        ['The Concorde Club', 51.48808, -0.40301, 4.5],
        ['Croydon High Sports Club', 51.341246, -0.061708, 4.5],
        ['Everyone Active Northolt Leisure Centre', 51.548934, -0.375026, 3.9],
        ['Everyone Active Central Park Leisure Centre', 51.602689, 0.228719, 3.8],
 ['The Landmark Spa and Health Club', 51.521554, -0.161116, 40],
        ['Brands Hatch Place Hotel and Spa', 51.361902, 0.269406, 30],
        ];

Open in new window

0
 
Robert SchuttSoftware EngineerCommented:
with the marker code from the first block and the array from the second block I can find no further problem. Do make sure nowhere (or everywhere) is a reference to venues, for example in function showError().

Live example: http://schutt.nl/ee/Q_28608952/

Still the best in situations like this is to examine the console in F12 dev tools, it should show you instantly where the syntax error is (if that's the problem) or missing files etc.
0
 
lz7cjcAuthor Commented:
I can't see anything unusual in the console - what should I be looking for?

I feel pretty much stumped!
0
 
lz7cjcAuthor Commented:
am getting this for fonts but don't think is relevant is it?
Font from origin 'http://localhost' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.
0
 
lz7cjcAuthor Commented:
I have isolated the problem. It is how the array is being treated. I have printed out and compared the two versions - the hard coded one which works on my system:
var venues =   [
['The Gym Way Kensington', 51.494474, -0.190661, 2],
                    ['The Circle Gym and Spa', 51.501491, -0.074497, 2.5],
                    ['Urban Kings', 51.531326, -0.122057, 25],
                    ['Springhealth Hampstead', 51.546273, -0.16419, 6],
                    ['Blue Harbour Health Club &amp; Spa', 51.475699, -0.182001, 8],
                    ['Cedars Leisure Club', 51.451782, -0.297184, 9],
                    ['The Landmark Spa and Health Club', 51.521554, -0.161116, 40],
                    ['Brands Hatch Place Hotel and Spa', 51.361902, 0.269406, 30],
                    ];

Open in new window


This is the top and tail of the generated array:
var venues =  [
['Everyone Active Hartham Leisure Centre', 51.800052, -0.077467, 4.2],
        ['Gordons Gym', 51.480226, 0.069589, 3.5],
        ['The Concorde Club', 51.48808, -0.40301, 4.5],
        ['Croydon High Sports Club', 51.341246, -0.061708, 4.5],
        ['Cedars Leisure Club', 51.451782, -0.297184, 25],
        ['The Landmark Spa and Health Club', 51.521554, -0.161116, 40],
        ['Brands Hatch Place Hotel and Spa', 51.361902, 0.269406, 30],
        ];

Open in new window


I see no difference between the two but something is happening with the second array that is stopping the map from being generated since if I remove the final attribute, price, the map will appear
0
 
lz7cjcAuthor Commented:
so i then tried hard coding the facilities from the output of the python code (that appears in the source when I create the page).

This doesn't work either; so presumably there must be something wrong of the generated venues list but I have compared them numerous times and can't see any difference!
0
 
lz7cjcAuthor Commented:
there was a "none" value in one of the records in the output... hard coding now works :)
So worst case I can use that but will go back to my raw data and fix - hopefully we are done ))
0
 
lz7cjcAuthor Commented:
sorry about the wild goose chase at the end - it was a missing price in one of my records.

thanks v much for all your help
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.