CODEWITHSUNDEEP
javascriptgoogle-maps
Tomas Kleinotas
Tomas Kleinotas

Reputation: 25

Show multiple google maps in one page

im using hpneo gmaps plugin: http://hpneo.github.io/gmaps/

and i want to use multiple maps with different locations, now i have this code, but it shows only the first map

/* Google map */
var map1;
    $(document).ready(function(){
      prettyPrint();
      map1 = new GMaps({
        div: '#map',
        scrollwheel: false,
        lat: 54.7181780,
        lng: 25.2204530,
        zoom: 16
      });

map1.addMarker({
        lat: 54.7181780,
        lng: 25.2204530,
        title: 'II "Meistrus" ',
        icon: '/images/marker.png'

      });
});

/* Vilnius */
var map2;
    $(document).ready(function(){
      prettyPrint();
      map2 = new GMaps({
        div: '#vilnius',
        scrollwheel: false,
        lat: 54.8900070,
        lng: 23.9255120,
        zoom: 10
      });

map2.addMarker({
        lat: 54.8900070,
        lng: 23.9255120,
        title: 'II "Meistrus" ',
        icon: '/images/marker.png'

      });
});

Here is fiddle code: http://jsfiddle.net/337T7/ - works fine, but if i want to display only the "vilnius" map and remove the <div id="map" class="map"></div> no one maps are displayed.

What im doing wrong?

Upvotes: 0

Views: 908

Answers (2)

Sheraff
Sheraff

Reputation: 6682

You should be checking whether the div exists before you try to call a function on it. The most simple way to do so is by placing the code within

if(document.getElementById('map)){
    //your code
}

Also, I think it would be good practice to put both chunks of code into one single document.ready

So the resulting code would be something like this:

var map1, map2;
$(document).ready(function(){
  prettyPrint();
  if(document.getElementById('map')){
    map1 = new GMaps({
      div: '#map',
      scrollwheel: false,
      lat: 54.7181780,
      lng: 25.2204530,
      zoom: 16
    });
    map1.addMarker({
      lat: 54.7181780,
      lng: 25.2204530,
      title: 'II "Meistrus" ',
      icon: '/images/marker.png'
    });
  }

  if(document.getElementById('vilnius')){
    prettyPrint();
    map2 = new GMaps({
      div: '#vilnius',
      scrollwheel: false,
      lat: 54.8900070,
      lng: 23.9255120,
      zoom: 10
    });
    map2.addMarker({
      lat: 54.8900070,
      lng: 23.9255120,
      title: 'II "Meistrus" ',
      icon: '/images/marker.png'
    });
  }
});

I believe it would be more elegant to not have the code related to one of the maps executed if the div isn't actually in the HTML by another way than by testing if the div if there. But I don't know how the structure of your project is.

Upvotes: 1

noel
noel

Reputation: 2145

Since the div isn't there, the first call is throwing an error, which is canceling the remaining call. You'll want to check if the div is present: http://jsfiddle.net/337T7/1/

/* Google map */
var map1;
$(document).ready(function(){
    if ($('#map').length) {
        prettyPrint();
        map1 = new GMaps({
            div: '#map',
            scrollwheel: false,
            lat: 54.7181780,
            lng: 25.2204530,
            zoom: 16
        });

        map1.addMarker({
            lat: 54.7181780,
            lng: 25.2204530,
            title: 'II "Meistrus" ',
            icon: 'http://silk.webmode.lt/wp-content/themes/silk_theme/images/marker.png'

        });
    }
});

/* Vilnius */
var map2;
$(document).ready(function(){
   if ($('#vilnius').length) {
      prettyPrint();
      map2 = new GMaps({
        div: '#vilnius',
        scrollwheel: false,
        lat: 54.8900070,
        lng: 23.9255120,
        zoom: 10
      });

    map2.addMarker({
        lat: 54.8900070,
        lng: 23.9255120,
        title: 'II "Meistrus" ',
        icon: 'http://silk.webmode.lt/wp-content/themes/silk_theme/images/marker.png'

      });
   }
});

Upvotes: 0

Related Questions