CODEWITHSUNDEEP
javascriptgoogle-maps-api-2
user3819713
user3819713

Reputation: 45

javascript google maps only one function works at once, rest not

At start I want to tell I don't have experience with JavaScript. I found the script and change to what I want. I try to load google map on two diffrent views (I work on Codeigniter) but only one Map load. When I go to second view the map dont display. Heres the code:

header:

<body onload='mapaStart()' onunload='GUnload()'>

first view:

<div id="doMeeting" style="width: 400px; height: 400px;">
</div>

<input type="hidden" id="lat" name="lat"/><br /><br /><br />
<input type="hidden" id="lng" name="lng"/><br /><br />

second view:

<div id="Rejestracja" style="width: 400px; height: 400px;">
<!-- tu będzie mapa -->
</div>

<input type="hidden" id="lat" name="lat"/><br /><br /><br />
<input type="hidden" id="lng" name="lng"/><br /><br />

footer:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<!-- google maps -->


<!-- Do rejestracji -->
<script type='text/javascript'>
<!-- 
var mapa;   
var marker;  

function mapaStart()
{
  if(GBrowserIsCompatible())  
  {       
    mapa = new GMap2(document.getElementById("Rejestracja" || "doMeeting"));

    mapa.setCenter(new GLatLng(52.348763181988076, 18.61083984375), 6, G_HYBRID_MAP);
    mapa.addControl(new GLargeMapControl());  
    mapa.addControl(new GMapTypeControl()); 

    marker = new GMarker(mapa.getCenter(),{icon: marker, draggable: true});
    mapa.addOverlay(marker);

    // zdarzenia dla markera
    GEvent.addListener(marker,'drag',uaktualnijWspolrzedne);
    GEvent.addListener(marker,'click',function()
    {
      marker.openInfoWindowHtml(marker.opis);
    });
    GEvent.trigger(marker,'drag');

    // zdarzenia dla mapy
    GEvent.addListener(mapa,'click',function(o,p)
    {
      if(p)
      {
        marker.setPoint(p);
        uaktualnijWspolrzedne();
      }
    });
  }
}

function uaktualnijWspolrzedne()
{
  var input_lat = document.getElementById('lat');
  var input_lng = document.getElementById('lng');
  var punkt = marker.getLatLng();

  input_lat.value = punkt.lat();
  input_lng.value = punkt.lng();
}

</script>



<!-- do api google maps -->
<script src='http://maps.google.com/maps?file=api&amp;v=2.x&amp;sensor=false&amp;key=ABQIAAA               
AskA3kyDm631CGf6Rw_GrbBRBRXpdM9jp6G1MF9yLMfWuIYZt2    
BR5Ltrn1m4MP2hliyyWcC1AqLxZ3A&hl=pl' type='text/javascript'></script>

And I notice when I type at first Rejestracja here:

mapa = new GMap2(document.getElementById("Rejestracja" || "doMeeting"));

Map load in view where is "Rejestracja" id but in second view where is id "doMeeting" not. If I reverse this element its opposite situation

Upvotes: 1

Views: 213

Answers (1)

Wet Noodles
Wet Noodles

Reputation: 805

In JavaScript, || can be used as an "OR" operator, or it can be used to return the first non "falsy" value. In your code:

mapa = new GMap2(document.getElementById("Rejestracja" || "doMeeting"));

The function call to document.getElementId will only retrieve "Rejestracja" because it is the first value in the condition that returns a truthy value. (truthy means not false, null, undefined, 0, empty string or NaN).

I am not sure how the google maps api works, but if it cannot take two DOM elements, you will need to store each map in its own variable:

var map1 = new GMap2(document.getElementById("Rejestracja"));
var map2 = new GMap2(document.getElementById("doMeeting"));

Or extract the code into its own function and pass in each DOM element.

Update: here is an example of what I mean - this will only work if your mapa variable is not used outside of the function where it is initialized.

function mapaStart()
{
    if(GBrowserIsCompatible())  
    {       
        var map1 = new GMap2(document.getElementById("doMeeting"));
        var map2 = new GMap2(document.getElementById("Rejestracja"));
        initializeMap(map1);
        initializeMap(map2);
    }
}

function initializeMap (mapa) 
{
    mapa.setCenter(new GLatLng(52.348763181988076, 18.61083984375), 6, G_HYBRID_MAP);
    mapa.addControl(new GLargeMapControl());  
    mapa.addControl(new GMapTypeControl()); 

    // remainder of original mapaStart function goes here
}

I hope this helps!

Upvotes: 1

Related Questions