?
Solved

Switch markers on map based on attributes

Posted on 2015-02-03
16
Medium Priority
?
154 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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
 

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

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

765 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