Solved

Google Maps API not showing all marks

Posted on 2013-05-30
5
316 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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

864 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

24 Experts available now in Live!

Get 1:1 Help Now