Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Google Maps API not showing all marks

Posted on 2013-05-30
5
Medium Priority
?
335 Views
Last Modified: 2013-06-02
I'm just wondering if someone could help me out with a map issue.

I've put a google map on a page using the API, and I'm trying to put points on the map using UK postcodes. I think I've done it correctly but the map is only showing a handful of markers.

Could someone have a look and tell me where I'm going wrong?

http://theappdevelopers.webdevsvr.com/ploink/charity/map/
0
Comment
Question by:SheppardDigital
  • 3
  • 2
5 Comments
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39209456
This must be due to a maximum number of allowed geocode calls Google enforces as a fair-use policy of their free service. I've seen a solution on this site that uses setInterval and recreated part of it for you in your source:
<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var geocoder;
        var map;
        var tmr;
        var i=0;
        var postcodes = [
            'EC1V9NR','EX85EY','BS94NR','M259SB','S702JW','WC2A3ED','HP202GA','W1T3JL','BN147EF','WS20BA','GL53TJ','EC1V0BB','RH161UA','DE42HN','WA11SR','TA35SN','CV81EG','LN13JN','SG12EF','WC1B3HH','BL11LS','EC4A1BZ','PE11FG','RH135PL','RH135SB','TS55NW','BD48EH','BS42BY','EX24AB','BT152GB','N51XL','SK83SZ','HP279HY','N10PW','W1W8RL','EC1V1NQ','L97AL','BD229AQ','BS313AZ','EH22PR','W1T2NU','HU47QF','WC1A2AJ','IV499DE','S0140QB','SW1W0RE','SE249BA','KT205RU','RG73YG','BA148HQ','SW1H0DX','N43HF','EC1Y8RT','PO201NP','NP223DF','CO168QF','NW14LH','E29PJ','TW118EE','WC1X9JS','W36NH','NW53DG','SW59TT','N89DJ','HR74NH','MK150ZR','YO188BA','BD14EW','EC1V8AF','TN235NU','SO505AD','PA113SX','SL00NH','GL516LQ','BN111DU','HA90NP','BH238EE','','E28AX','','BN113PH','RG147UJ','','','','','UB100LG','','WR98DY','SO533FP','ig88na','IP16HX','N70SJ','RG18LG','EH75QY','','W140RZ','BN13FF','WR38SZ','EC3P3BZ','SW61RU','L38LR','LS197XY','B139HS','SO165NA','OX252LX','','CO11DZ','SN128NJ','EX48NS','M307NB','','W106EJ','se184lt','RH122DP','','SP34LZ','BH48HZ','DT34JT','BN37DX','SW97AA','HG15DH','G38SJ','','LU55DE','TN69DH','W1T5DX','','SO427QQ','GU153HQ','NW10AG','','mk56ls','fk94la','WD247RD','TW140JJ','SK71ZD','B168DN','KT227NA','W1T7NY','BN59SD','NW23SH','EC2A4LT','E143XB','DY139SH','TW88LB','GU299DQ','SA91UD','OX41AW','WR65JB','LE129WN','W1S1DX','st66hn','W1W6YF','BT96DJ','M13NJ','RG14QS','LE11WJ','BN251QL','NG68SF','RM107HR','n80hg','ML20RL','SY38HS','SE136TJ','WA20UT','BN245QU','AB420NT','N19SQ','G511JL','GL207AN','GL503PR','CB11EZ','SW111QU','se156fp','SE162AP','SQ61QU','TW106AN','NE638QZ','YO329WN','CV49SW','','KT179HD','W1B1LY','Cw111EG','BN11RH','SN11QN','EH375PX','CT34AP','HP143XL','SW85NQ','N134BS','BN33YP','AB418UW','CF53EF','B610AN','TS69DA','CV311ES','PL190LX','DA163PY','CB61NG','PO202wa','E149FW','TS43LQ','G26HJ','EH24BJ','GL88LP','BS50HE','DD81TR','DN358NR','dl149pl','LN12HJ','EH24PG','EC1M6DX','RM66NA','E83DL','EC1V9BE','TN39JB','SE192AT','DN200BJ','WS153LY','SE19AQ','ex26ha','SN28UH','CH47AE','SK144PQ','NP198FT','TQ110LQ','YO88HL','WF83NB','SL61PE','GU273AU','BN16AA','EC2A3NW','PO61PJ','SW1W9RB','HP92NB','L122AP','CT161EU','GL519JW','SW33PP','CB11EE','NG184SF','BH232JX','NW53ED','E29PJ','RM78RB','DA82GQ','n18du','LS177HY','OX41JE','W1U6PZ','RH55TH','L42QH','GL208RW','CW74EH','NW42EL','EC1R1UL','BA113EG','W42PD','E28DD','M333XG','SE50HF','TA78PJ','PE275WF','PE13XB','NE237RY','FY20BG','SL00NH','RH55NG','SY11QU','Dn329ET','CV89DA','EC2A4LT','E164HQ','TW92GW','SW98RR','BT42LS','IP60AE','LE101SU','sa174hn','HA62RN','SA311BD','LU13BE','BT132BH','S353HY','WV14AN','SW115EJ','SP13YQ','LU33NT','GU511EJ','N128NP','RH80PG','DT11RE','EX28PF','LU12NA','NN109TY','W44PH','CM11GH','RG429GA','WA20AN','KT205LR','GU513RW','M125GL','SW1W0RE','TS285DH','HP178HB','LL181TB','M145RZ','ne340bq','PO207LN','CV346WE','SW194PU','EX391AS','NR23DF','EH320AG','EX11BB','WN88LH','HX15PG','BA146JQ','LS84HS','HX12NE','NW54BA','SN153DB','PR11YE','CM26DA','W68BS','RG279SB','P096DJ','E11EE','SW1E5NE','W127SB','CH71EZ','NE611YR','HU114RW','GU344QD','ST58AG','S23DT','L402QX','PE292NH','B151TS','E16QE','SW198UX','KT64DT','PE15TX','LS64BT','DY98YL','CM11RQ','PR26QL','E149FW','CV364AB','HP219PP','TA218BG','RH42BL','dh44pg','SE16BN','S755QG','OX107HR','SW1P1JH','WD50GC','SE18SB','AL22HY','GL46SX','NW21DY','EX226PP','G720FB','SL90RJ','WF15EY','RM70PH','RH135WL','CW69ER','CF243RQ','SW1P4ST','N65SQ','WC1V7AA','GU146BU','RH177NG','sk38ls','SE17QD','RG301DN','G59EJ','DE12QQ','WS124XZ','W105AA','PE46NB','postcode','BD12AW','CF157RG','LN43SR','Cm20dz','W21RR','YO139BG','G411EE','HP234BB','CT28JA','LE30HH','W45YF','N79JL','CF146JW','CW82AB','BS83HA','SN152PP','RH194DF','PA26HN','PH13FX','WC2A1AP','BH215pp','GL27BT','WS98LH','TN401JJ','UB70EF','SW21SA','OX169AB','CV378YD','BS408WB','BD234TA','SE10EH','NE31EE','w104lg','WC1E8QG','SK110HR','DT118DL','G720BS','CW124LH','EC1V7ET','SE219AT','SG51EG','NE126UE','EN107BN','NN28AG','IP76GF','RH76PW','TF136Es','LE111HA','SK87AZ','HP219JR','EC1R1UL','EC1R4RE','CB99SH','rm109rr','','LA59BY','WC1E7HY','BA69JF','N77JW','HU11RR','EC1A9ET','EH88PJ','GU195HD','DD11PB','le32bl','KT119EA','PL131NZ','L19BW','EC2V7QP','GL43JL','HP198HT','MK93HP','BH92SG','CF119HA','SR11LB','LA96EN','BB44AQ','Le16NB','ST47RY','L77BL','BS41DQ','G22TJ','sw184jb','NN86NL','RH163LH','E173PW','RG184QN','ta63rr','M98AE','BT71NR','PO11HT','N19LZ','NP114QA','RG17PN','SE18NZ','BN111QP','SE17HS','BB12FD','bs67hw','W151HQ','NG98GA','S201BW','EC2A2DB','WC1B4HP','GU31HS','NP167HH','GU48JJ','HP178AF','BS255NZ','ME46BE','EC1P1WF','92122','ST72JA','L38DU','W1F9NS','CR84DN','SW129ES','BH242SE','BH188JL','BH243QX','OX277SG','HP136RF','HP202JH','CB235RG','WN60NB','LA88LX','KT198JD','SW192LQ','EH12YT','IV363TZ','EC1Y8RT','BD214NQ','mk401hu','MK125NF','MK454HS','GU236BN','WF13QW','SO500GQ','NE31PH','HP279NS','EH421LE','BH64EH','NN27HW','EH164NT','M445AD','W69NH','EC2V7JN','BN126NZ','TN11YP','BN126NZ','NG317XT','OX135EJ','PL206RR','SE17SJ','CO11NS','EC1V3RS','BS162QQ','ML14UF','BA33ZL','RG20GZ','TN231PF','LU12LJ','NW19XB','E78PN','HP13AE','M329UP','M210AE','SW1P2BG','PL207PE','ME24NP','LL296DH','SW1V4LY','E154LZ','EH66SP','PL68DH','BS13PY','RH122EP','W1W6JL','LS176AZ'            ];
 
        function initialize() {
            geocoder = new google.maps.Geocoder();
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
 
            map.setCenter(new google.maps.LatLng(54.00, -3.00));

            tmr = setInterval(trickleMarkers, 100);
        }

        function trickleMarkers() {
            var blnDone = false;
            do {
                var pcd = postcodes[i];
                if (pcd != '' && pcd != 'postcode') {
                    blnDone = true;
                    geocoder.geocode( { 'address': postcodes[i] + ',UK'}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            var marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location
                            });
                        }
                    });
                }
                if (++i == postcodes.length) { // done
                  clearInterval(tmr);
                  blnDone = true;
                }
            } while (!blnDone);
        }
 
        google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Open in new window

Of course now it takes a while before all markers are there but at least it doesn't stop at some undetermined point. The exact interval (100 ms now) could be played with, I'm not sure what the minimum is but maybe it's not wise to try and go too low as it might start failing again at some point.

Have you researched the possibility of obtaining a license so you can do more (if not unlimited) calls? This is often how things like that work, although I haven't looked at it for this service.
0
 

Author Comment

by:SheppardDigital
ID: 39214188
I've signed up for a key for google maps, but the map still doesn't seems to be working how I'd like it to?

If I log into the google api site, I can see 1 active api for google maps v3, and I've put the API key into the URL. If you view the source hopefully you'll see the key.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 39214233
Can you try this code to make sure what the problem is? Check the console (with F12 in IE) for output.
            for (i = 0; i < postcodes.length; i++) {
                geocoder.geocode( { 'address': postcodes[i] + ',UK'}, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                      console.log('OK, results.length = ' + results.length);
                      if (results.length > 0) {
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });
                      }
                    } else {
                      console.log('ERR, status = ' + status);
                    }
                });
            }

Open in new window

I'm still getting the error OVER_QUERY_LIMIT, but then I assume the key only works when used from your website...

Actually, looking at the GeoCoding Usage Limits, I only see a relaxed policy for Business accounts, nothing about the limit of 11 or 12 that I'm seeing on your site, but also nothing about a relaxed policy for normal accounts.

You haven't commented on my previous solution but I assume that the trickle is taking too long for you. Have you considered caching the lat/lng for the postcodes? I'm not sure it would be 100% legal looking at the documentation, although you are ultimately only using the locations to put markers on a map. The simplest way would be to use the trickle code to get the coordinates and put them in a javascript array, but if the postcodes are currently stored server side (and could be changed) you could make some system to determine the coordinates for new postcodes which should be less prone to exceeding the limit and even if it does, after some time it would solve itself as the new postcodes are added in 'batches'.
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 2000 total points
ID: 39214372
I've read some more documentation, seems to me that the key does not allow for unlimited geocode calls. I think I would go for some sort of caching of the actual location info. I have started a new version of the code locally which will give me a list with which it should be possible to create a different version that does not need geocode calls. Let me know if that's the way you wanna go.
0
 

Author Comment

by:SheppardDigital
ID: 39214531
Hi,

It seems caching is more than likely the best option like you say.

I've previously developed an api to return the longitude and latitude for a postcode that's based on the post code database that you can download. I could probably use that in combination with the google maps to get something working.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

885 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