Solved

Google Maps API not showing all marks

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses four methods for overlaying images in a container on a web page
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 …
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…

706 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

20 Experts available now in Live!

Get 1:1 Help Now