Results 1 to 2 of 2

Thread: Can't show more than one geolocations using google map api in one page

Threaded View

  1. #1
    Join Date
    Mar 2014

    Can't show more than one geolocations using google map api in one page

    I use googleapi to show geolocation of multiple places in one page but it's not possible.

    I initialize a variable to count the maps:

    var countmaps=1;

    I do the following in a loop(for each map i want to show):

    First of all i get longitude and latitude from an xml file. This is working:

    var lat= latitude[0].childNodes[0].nodeValue;
    var lon= longitude[0].childNodes[0].nodeValue;

    After this i create a new paragraph element for holding each map:

    var newmap=document.createElement('p');

    Id of the element is map1 for the first map, map2 for the second etc.

    newmap.id="maps" + countmaps;

    Then, i save the id in a variable:

    var getid= "maps" + countmaps;

    I append the new element to a div called section:


    So far everything is working fine. Then i define the functions for showing the map. I took them from w3schools:
        function getLocation()
                if (navigator.geolocation)
          else{x.innerHTML="Geolocation is not supported by this browser.";//not important
        function showPosition()
          var latlon=lat+","+lon;
          var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
        //i get element with id map1 in the first loop, map2 in the second etc in the below
          document.getElementById(getid).innerHTML="<img src='"+img_url+"'>";
        function showError(error)
            case error.PERMISSION_DENIED:
              document.getElementById(getid).innerHTML="MAP Not Available"
            case error.POSITION_UNAVAILABLE:
             document.getElementById(getid).innerHTML="MAP Not Available"
            case error.TIMEOUT:
              document.getElementById(getid).innerHTML="MAP Not Available"
            case error.UNKNOWN_ERROR:
              document.getElementById(getid).innerHTML="MAP Not Available"
    Finally, i call getlocation function and increase the counter for my element ids.


    In most of the cases i only got the last map. Can you explain this behavior?
    Last edited by jedaisoul; 04-02-2014 at 04:38 AM. Reason: code tags added

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center