Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to get 2 Google MAps on Same Page in Bootstrap

    Here is the js code
    Code:
    	
    /**/
    /* google map */
    /**/
    
    function init_map()
    {
    	var coordLat = 32.892092;
    	var coordLng = -117.192983;
            
            
    	if( jQuery(window).width() < 756 )
    	{
    		delta = 0;
    	}
    	
    	var point = new google.maps.LatLng(coordLat,coordLng);
    	var center = new google.maps.LatLng(coordLat,coordLng);
    	
    	var mapOptions = {	
    		zoom: 15,
    		center: center,
    		scrollwheel: false,
    		mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
      var image = 'images/gmap_default.png';
      var beachMarker = new google.maps.Marker({
      	map: map,
      	position: point
      });
    }
    
    
    
    function init_map2()
    {
    	var coordLat2 = 58.892092;
    	var coordLng2 = -157.192983;
            
            
    	if( jQuery(window).width() < 756 )
    	{
    		delta = 0;
    	}
    	
    	var point2 = new google.maps.LatLng(coordLat2,coordLng2);
    	var center2 = new google.maps.LatLng(coordLat2,coordLng2);
    	
    	var mapOptions2 = {	
    		zoom: 15,
    		center: center2,
    		scrollwheel: false,
    		mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map2 = new google.maps.Map(document.getElementById('map2'), mapOptions2);
      var image = 'images/gmap_default.png';
      var beachMarker = new google.maps.Marker({
      	map: map2,
      	position: point2
      });
    }
    
    
    
    
    /**/
    /* on resize event */
    /**/
    $(window).resize(function()
    {	
    	/**/
    	/* benefits */
    	/**/
    	$('.benefits .text').css('padding-bottom', 51);
    	if( $(window).width() > 767 )
    	{
    		$('.benefits li').each(function()
    		{
    			if( $(this).outerHeight() < $('.benefits').outerHeight() )
    			{
    				$(this).find('.text').css('padding-bottom', $('.benefits').outerHeight() - $(this).outerHeight() + 51);
    			}
    		});
    	}
    	else if( $(window).width() > 479 )
    	{
    		$('.benefits li:nth-child(even)').each(function()
    		{
    			elem = $(this);
    			if( elem.outerHeight() < elem.prev().outerHeight() )
    			{
    				elem.find('.text').css('padding-bottom', elem.prev().outerHeight() - elem.outerHeight() + 51);
    			}
    			else if( $(this).outerHeight() > $(this).prev().outerHeight() )
    			{
    				elem.prev().find('.text').css('padding-bottom', elem.outerHeight() - elem.prev().outerHeight() + 51);				
    			}
    		});		
    	}
    	
    	
    	/**/
    	/* doctors */
    	/**/
    	$('#doctors .grid').isotope({
    		masonry: {columnWidth: $('#doctors .item').outerWidth()}
    	});
    	
    	
    	/**/
    	/* news */
    	/**/
    	$('#news .grid').isotope({
    		masonry: {columnWidth: $('#news .item').outerWidth()}
    	});
    	
    	
    	/**/
    	/* photo tour */
    	/**/
    	$('#photo-tour .grid').isotope({
    		masonry: {columnWidth: $('#photo-tour .item').outerWidth()}
    	});
    });
    
    
    /**/
    /* on load event */
    /**/
    $(function()
    {
    	/**/
    	/* fancybox */
    	/**/
    	$(".fancybox").fancybox();
    	
    	
    	/**/
    	/* mobile main nav */
    	/**/
    	$('#mobile-main-nav').on('click', 'i', function()
    	{
    		$(this).nextAll('ul').slideToggle('fast');
    	});
    	$('#mobile-main-nav').on('click', '.opener', function()
    	{
    		$(this).next('ul').slideToggle('fast');
    		return false;
    	});
    	
    	
    	/**/
    	/* quick search */
    	/**/
    	$('#quick-search-switcher').on('click', function()
    	{
    		$('#quick-search').toggleClass('quick-search-visible');
    	});
    	
    	
    	
    	
    	
                    
    	/* map2 */
    	/**/
    	if( document.getElementById('map2') )
    	{
    		var script2 = document.createElement('script2');
    	 	script2.type = 'text/javascript';
    	 	script2.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&callback=init_map2';
    	 	document.body.appendChild(script2);
     	}
    	
    	/**/
    	/* widget calendar */
    	/**/
    	$('#calendar').datepicker({
    		prevText: '<i class="fa fa-angle-left"></i>',
    		nextText: '<i class="fa fa-angle-right"></i>'
    	});
    	
    	
    	/**/
    	/* widget departments */
    	/**/
    	$('.widget-departments').on('click', 'dt', function()
    	{
    		$(this).toggleClass('opened').next().slideToggle('fast');
    	});
    	
    	
    	/**/
    	/* widget contacts */
    	/**/
    	$('.widget-contacts').on('click', 'dt', function()
    	{
    		$(this).toggleClass('opened').next().slideToggle('fast');
    	});
    	
    	
    	/**/
    	/* widget comments */
    	/**/
    	$('#comments-carousel').owlCarousel({
    		singleItem: true,
    		navigation: true,
    		navigationText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
    		pagination: false,
    		slideSpeed: 200,
    		paginationSpeed: 200,
    		rewindSpeed: 200,
    		transitionStyle : 'fade',
    		autoHeight: true
      });
    	
    	
    	function loadScript(url, $obj, callback){
    
    	    var script = document.createElement("script")
    	    script.type = "text/javascript";
    
    	    if (script.readyState){  //IE
    	        script.onreadystatechange = function(){
    	            if (script.readyState == "loaded" ||
    	                script.readyState == "complete"){
    	                script.onreadystatechange = null;
    	                callback();
    	            }
    	        };
    	    } else {  
    	    }
    
    	    script.src = url;
    	    $obj.get(0).appendChild(script);
    	}
    
    	/**
    	 * Prepare html to correctly display inside tab container
    	 *
    	 * @param event - ui tab event 'show'
    	 * @param ui - jquery ui tabs object
    	 */
    
    	function wpb_prepare_tab_content(event, ui) {
    	    var panel = ui.panel || ui.newPanel;
    	    vc_carouselBehaviour();
    	    var $ui_panel = jQuery(panel).find('.isotope'),
    	        $google_maps = jQuery(panel).find('.wpb_gmaps_widget');
    	    if ($ui_panel.length > 0) {
    		    $ui_panel.isotope("reLayout");
    	    }
    
    	    if($google_maps.length && !$google_maps.is('.map_ready')) {
    	        var $frame = $google_maps.find('iframe');
    	        $frame.attr('src', $frame.attr('src'));
    	        $google_maps.addClass('map_ready');
    	    }
    	}
            
            
            
            
            
            
            
      function vc_carouselBehaviour() {
        jQuery(".wpb_carousel").each(function() {
                var $this = jQuery(this);
                if($this.data('carousel_enabled') !== true && $this.is(':visible')) {
                    $this.data('carousel_enabled', true);
                    var carousel_width = jQuery(this).width(),
                        visible_count = getColumnsCount(jQuery(this)),
                        carousel_speed = 500;
                    if ( jQuery(this).hasClass('columns_count_1') ) {
                        carousel_speed = 900;
                    }
                    /* Get margin-left value from the css grid and apply it to the carousele li items (margin-right), before carousele initialization */
                    var carousele_li = jQuery(this).find('.wpb_thumbnails-fluid li');
                    carousele_li.css({"margin-right": carousele_li.css("margin-left"), "margin-left" : 0 });
    
                    jQuery(this).find('.wpb_wrapper:eq(0)').jCarouselLite({
                        btnNext: jQuery(this).find('.next'),
                        btnPrev: jQuery(this).find('.prev'),
                        visible: visible_count,
                        speed: carousel_speed
                    })
                        .width('100%');//carousel_width
    
                    var fluid_ul = jQuery(this).find('ul.wpb_thumbnails-fluid');
                    fluid_ul.width(fluid_ul.width()+300);
    
                    jQuery(window).resize(function() {
                        var before_resize = screen_size;
                        screen_size = getSizeName();
                        if ( before_resize != screen_size ) {
                            window.setTimeout('location.reload()', 20);
                        }
                    });
                }
    
        });
            /*
            if(jQuery.fn.bxSlider !== undefined ) {
                jQuery('.bxslider').each(function(){
                   var $slider = jQuery(this);
                   $slider.bxSlider($slider.data('settings'));
                });
            }
            */
            if(window.Swiper !== undefined) {
    
                jQuery('.swiper-container').each(function(){
                    var $this = jQuery(this),
                        my_swiper,
                        max_slide_size = 0,
                        options = jQuery(this).data('settings');
    
                        if(options.mode === 'vertical') {
                            $this.find('.swiper-slide').each(function(){
                                var height = jQuery(this).outerHeight(true);
                                if(height > max_slide_size) max_slide_size = height;
                            });
                            $this.height(max_slide_size);
                            $this.css('overflow', 'hidden');
                        }
                        jQuery(window).resize(function(){
                            $this.find('.swiper-slide').each(function(){
                                var height = jQuery(this).outerHeight(true);
                                if(height > max_slide_size) max_slide_size = height;
                            });
                            $this.height(max_slide_size);
                        });
                        my_swiper = jQuery(this).swiper(jQuery.extend(options, {
                        onFirstInit: function(swiper) {
                            if(swiper.slides.length < 2) {
                                $this.find('.vc-arrow-left,.vc-arrow-right').hide();
                            } else if(swiper.activeIndex === 0  && swiper.params.loop !== true) {
                                $this.find('.vc-arrow-left').hide();
                            } else {
                                $this.find('.vc-arrow-left').show();
                            }
                        },
                        onSlideChangeStart: function(swiper) {
                            if(swiper.slides.length > 1 && swiper.params.loop !== true) {
                                if(swiper.activeIndex === 0) {
                                    $this.find('.vc-arrow-left').hide();
                                } else {
                                    $this.find('.vc-arrow-left').show();
                                }
                                if(swiper.slides.length-1 === swiper.activeIndex) {
                                    $this.find('.vc-arrow-right').hide();
                                } else {
                                    $this.find('.vc-arrow-right').show();
                                }
                            }
                        }
                    }));
                    $this.find('.vc-arrow-left').click(function(e){
                        e.preventDefault();
                        my_swiper.swipePrev();
                    });
                    $this.find('.vc-arrow-right').click(function(e){
                        e.preventDefault();
                        my_swiper.swipeNext();
                    });
                    my_swiper.reInit();
                });
    
            }
    
    	}
    
    /********************************************/
    }
    /* COMPOSER */
    
    function milestone_counter (){
    	if (!is_mobile()){
    		$(".milestone").each(function (){
    			if ($(this).attr("data-counted")!="yes"){
    				var el = this;
    				if (is_visible(el)){
    					$(el).attr("data-counted","yes");
    					var str_count = $(el).find(".title").text();
    					var count = parseInt(str_count);
    					var digits = 0;
    					var digits = str_count.length;
    					var i = 0;
    					var str_i = "";
    					for (var k=0;k<digits;k+=1){
    						str_i = str_i+"0";
    					}
    					var flag = false;
    					var timer = setInterval(function (){
    						for (var j=0;j<digits-1;j+=1){
    							if (parseInt(str_i.charAt(digits-1-j)) != parseInt(str_count.charAt(digits-1-j))){
    								var number = Math.pow(10,j);
    								i+=number;
    								flag = true;
    							}
    							if (parseInt(str_i.charAt(0))<parseInt(str_count.charAt(0))){
    								var number = Math.pow(10,digits-2);
    								i+=number;
    								flag = true;
    							}
    						}
    						if (flag == true){
    							str_i = String(i);
    							$(el).find(".title").text(str_i);
    						}
    						flag = false;
    						if (i>=count){
    							clearInterval(timer);
    						}
    					},85);
    				}
    			}
    		});
    	}
    }
    function progress_bar_loader (){
    	if (!is_mobile()){
    			$(".vc_bar").each(function(){
    				var el = this;
    				if (is_visible(el)){
    					if ($(el).attr("processed")!="true"){
    						$(el).css("width","0%");
    						$(el).attr("processed","true");
    						var val = parseInt($(el).attr("data-value"));
    						var fill = 0;
    						var timer = setInterval(function (){
    							if (fill<val){
    								fill += 1;
    								$(el).css("width",String(fill)+"%");
    								var ind = $(el).find("em");
    								$(ind).text(fill+"%");
    								ind.css("left",String(fill)+"%");
    							}
    						},10);			
    					}
    				}
    			});
    		}
    	else{
    			$(".vc_bar").each(function(){
    				var el=this;
    				var fill = $(el).attr("data-value");
    				$(el).css('width',fill+'%');
    			});		
    	}
    
    }
    
    function is_visible (el){
    	var w_h = $(window).height();
    	var dif = $(el).offset().top - document.body.scrollTop;
    	if ((dif > 0) && (dif<w_h)){
    		return true;
    	}
    	else{
    		return false;
    	}
    
    }
    function chart_circle_init (){
    	var animate;
    	if (is_mobile()){
    		animate = false
    	}
    	else{
    		animate=2000;
    	}
    	$('.chart-circle').each(function (){
    		if (is_visible(this)){
    			$(this).append("<span class='value' style='color:"+$(this).attr("data-color")+"'>"+$(this).attr("data-percent")+"%"+"</span>")
    			if ($(this).hasClass("type-2")){
    			    $(this).easyPieChart({
    			        animate: animate,
    			        lineWidth: 20,
    			        size: 250,
    			        scaleColor:'#fff',
    			        trackColor:'#e2e2e2',
    			        barColor:$(this).attr("data-color"),
    			        lineCap:'butt'
    			    });
    			}
    			else if ($(this).hasClass("type-3")){
    			    $(this).easyPieChart({
    			        animate: animate,
    			        lineWidth: 10,
    			        size: 250,
    			        scaleColor:'#fff',
    			        trackColor:'#e2e2e2',
    			        barColor:$(this).attr("data-color"),
    			        lineCap:'butt'
    			    });
    			}
    			else{
    			    $(this).easyPieChart({
    			        animate: animate,
    			        lineWidth: 40,
    			        size: 250,
    			        scaleColor:'#fff',
    			        trackColor:'#e2e2e2',
    			        barColor:$(this).attr("data-color"),
    			        lineCap:'butt'
    			    });
    			}
    		}
    	});
    
        //update instance after 5 sec
    }
    function is_mobile (){
    		if (($(window).width()<767) || (navigator.userAgent.match(/(iPhone|iPod|iPad)/))){
    			return true;
    		}
    		else{
    			return false;
    		}
    }
    /*work*/

    and here is the html code
    Code:
    <!-- map -->
    <section class="map">
    <div class="widget-title">Our Locations</div>
    <div id="map" class="google-map"></div>
    </section>
    <!--/ map -->
    
    <!-- map -->
    <section class="map">
    <div class="widget-title">Our Locations</div>
    <div id="map2" class="google-map"></div>
    </section>
    <!--/ map -->
    I can't seem to get the second google map to show. What I am I doing wrong? I am no javscript programmer just hacking around.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,097
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Bare bones version:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    </head>
    
    <body>
    <section class="map">
    	<div id="googleMap" style="width:500px;height:380px;"></div>
    </section>
    ==========================================================<br />
    
    <section class="map">
    	<div id="googleMap_2" style="width:500px;height:380px;"></div>
    </section>
    
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>
    
    <script>
    function initialize(){
    	var mapProp = {
    		center:new google.maps.LatLng(32.892092,-117.192983),
    		zoom:15,
    		mapTypeId:google.maps.MapTypeId.ROADMAP
    	};
    	var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
    
    	var mapProp_2 = {
    		center:new google.maps.LatLng(58.892092,-157.192983),
    		zoom:15,
    		mapTypeId:google.maps.MapTypeId.ROADMAP
    	};
    	var map=new google.maps.Map(document.getElementById("googleMap_2"),mapProp_2);
    }
    
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    low tech (03-29-2014)


  •  

    Posting Permissions

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