www.webdeveloper.com
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
    Posts
    1

    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:

    section.appendChild(newmap);

    So far everything is working fine. Then i define the functions for showing the map. I took them from w3schools:
    Code:
        function getLocation()
          {
                if (navigator.geolocation)
            {
            navigator.geolocation.getCurrentPosition(showPosition,showError);
            }
          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="
          +latlon+"&zoom=14&size=400x300&sensor=false";
        //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)
          {
          switch(error.code) 
            {
            case error.PERMISSION_DENIED:
              document.getElementById(getid).innerHTML="MAP Not Available"
              break;
            case error.POSITION_UNAVAILABLE:
             document.getElementById(getid).innerHTML="MAP Not Available"
              break;
            case error.TIMEOUT:
              document.getElementById(getid).innerHTML="MAP Not Available"
              break;
            case error.UNKNOWN_ERROR:
              document.getElementById(getid).innerHTML="MAP Not Available"
              break;
            }
    
    
     }
    Finally, i call getlocation function and increase the counter for my element ids.

    getLocation();
    countmaps++;

    In most of the cases i only got the last map. Can you explain this behavior?
    Last edited by jedaisoul; 04-02-2014 at 03: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



Recent Articles