Solved

Google Maps API not showing all marks

Posted on 2013-05-30
5
327 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
[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
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

623 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