www.webdeveloper.com
Results 1 to 2 of 2

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

  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

  2. #2
    Join Date
    Mar 2012
    Posts
    1,651
    I think that you will find that you can only have one live map per page. In any case, if you could have multiple maps, the load time would probably be excessive! Anyway, a work-around I have used is to use static jpgs of the maps, then code it so that clicking on a map activates it.

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