Solved

Switch markers on map based on attributes

Posted on 2015-02-03
16
133 Views
Last Modified: 2015-02-03
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
0
Comment
Question by:lz7cjc
  • 12
  • 4
16 Comments
 

Author Comment

by:lz7cjc
ID: 40585967
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
 

Author Comment

by:lz7cjc
ID: 40585975
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
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40586046
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
 

Author Comment

by:lz7cjc
ID: 40586150
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
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40586193
For starters, the array is not assigned to a variable at all in this version ;-)
0
 

Author Comment

by:lz7cjc
ID: 40586222
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
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40586247
Still 1 opening [ missing after the =
0
 

Author Comment

by:lz7cjc
ID: 40586253
i switched locations for venues as the upper/lowercase L was doing my head in!
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:lz7cjc
ID: 40586287
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
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40586368
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
 

Author Comment

by:lz7cjc
ID: 40586481
I can't see anything unusual in the console - what should I be looking for?

I feel pretty much stumped!
0
 

Author Comment

by:lz7cjc
ID: 40586504
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
 

Author Comment

by:lz7cjc
ID: 40586562
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
 

Author Comment

by:lz7cjc
ID: 40586587
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
 

Author Comment

by:lz7cjc
ID: 40586646
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
 

Author Closing Comment

by:lz7cjc
ID: 40586685
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

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now