atmist / snazzy-info-window Goto Github PK

import {SnazzyInfoWindow} from 'snazzy-info-window;

//inside my render
<InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}
          onClose={this.onClose}
        >
        <div>
          <h5>{this.state.selectedPlace.name}</h5>
          <p>{this.state.selectedPlace.address}</p>
          <p>{this.state.selectedPlace.busy}</p>
        </div>
</InfoWindow>

/**
 * Choose where you want the info window to be displayed, relative to the marker.
 */
placement: 'top' | 'bottom' | 'left' | 'right';

        but it seems to be opening far away from the marker

    var map,
     mapElement = jQuery('.map-container').attr('id'),
     postsURL = '/wp-json/wp/v2/map-api?per_page=100',
     zoom = set_php_vars.zoom,
     icon = set_php_vars.defaultIcon,
     style = set_php_vars.styling,
     catID = set_php_vars.catID,
     prev_infowindow = false,
     label = 1,
     markers = [],
     markerArray = [],
     cats = [],
     count,
     items,
     center;

 function initMap() {
     'use strict';

     if (catID !== '')
         postsURL = '/wp-json/wp/v2/map-api?per_page=100&map-cat=' + catID;


     var center = new google.maps.LatLng(set_php_vars.homeLat, set_php_vars.homeLng),

         map = new google.maps.Map(document.getElementById(mapElement), {
             zoom: parseInt(zoom),
             center: center,
             mapTypeId: 'terrain',
             mapTypeControl: false,
             mapTypeIds: ['styledMap']
         });

     jQuery.getJSON(style, function(data) {

         var styledMapType = new google.maps.StyledMapType(
             data, {
                 name: 'Custom Map Styling'
             });

         map.mapTypes.set('styledMap', styledMapType);
         map.setMapTypeId('styledMap');

     });

     jQuery.ajax({
         url: postsURL,
         method: 'GET',
         success: function(data) {
             var marker,
                 i,
                 n = 1,
                 metaMarkup = '',
                 metaEndMarkup = '',
                 bounds = new google.maps.LatLngBounds();

             data.forEach(function(post) {

                 //console.log(post);

                 var pos = new google.maps.LatLng(post.map_fields._map_lat, post.map_fields._map_lng);
                 bounds.extend(pos);

                 //<editor-fold desc="Marker Build">
                 var marker = new google.maps.Marker({
                     position: pos,
                     map: map,
                     title: post.title.rendered,
                     icon: icon,
                     city: post.map_fields._map_city,
                     state: post.map_fields._map_state,
                     sf: post.map_fields._map_sf || '',
                     buildingCount: post.map_fields._map_buildings || '',
                 });
                 //</editor-fold>

                 if (marker.sf || marker.buildingCount) {
                     metaMarkup = '<div class="location-meta">';
                     metaEndMarkup = '</div>';
                 }

                 if (marker.sf)
                     metaMarkup += '<span class="sf">' + marker.sf + ' SF</span>';

                 if (marker.buildingCount)
                     metaMarkup += '<span class="building-count">Buildings: ' + marker.buildingCount + '</span>';

                 //<editor-fold desc="Content String Build">
                 var contentString = '<div class="marker-content-container">' +
                     '<div class="marker-header">' +
                     '<p>' + marker.title + '</p>' +
                     '</div> <!-- /.marker-header -->' +
                     '<div class="marker-address">' +
                     '<address>' + marker.city + ' ' + marker.state + '</address>' +
                     '</div> <!-- /.marker-address -->' +
                     metaMarkup +
                     '</div>';

                 markers.forEach(function(marker) {
                     var info = new SnazzyInfoWindow({
                         marker: marker,
                         //content: contentString,
                         content: 'hi',
                     });
                     info.open();
                 });

             });
         },
         cache: true
     });

     google.maps.event.addDomListener(window, 'resize', function() {
         var center = map.getCenter();
         google.maps.event.trigger(map, "resize");
         map.setCenter(center);
     });

 }

Uncaught ReferenceError: google is not defined
Uncaught ReferenceError: SnazzyInfoWindow is not defined

// Create the map
var map = new google.maps.Map($('.map-canvas')[0], {
    zoom: 14,
	styles: mapStyle,
	scrollwheel: false,
	center: new google.maps.LatLng(-33.88322, 151.22009),
    
	
	//{'featureType': 'poi','elementType': 'all', 'stylers': [{'visibility': 'off'}]},//mapStyle,
	
	
});

// Add a custom marker
var markerIcon = {
    path: 'M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z',
    fillColor: '#6FC',
    fillOpacity: 0.95,
    scale: 3,
    strokeColor: '#fff',
    strokeWeight: 2,
    anchor: new google.maps.Point(12, 24)
};
/*var marker = new google.maps.Marker({
    map: map,
    icon: 'logo_sbc_CUBSM.fw.png',
    position: new google.maps.LatLng(-33.87073, 151.2104)
});*/

var marker_a = new google.maps.Marker({
    map: map,
    icon: 'sbc_icon2sm.png',
    position: new google.maps.LatLng(-33.87355, 151.20697)
});

 var marker_b = new google.maps.Marker({
    map: map,
    icon: 'sbc_icon2sm.png',
    position: new google.maps.LatLng(-33.86578, 151.20616)
});

 var marker1 = new google.maps.Marker({
    map: map,
    icon: 'sbc_icon2sm.png',
    position: new google.maps.LatLng(-33.88706, 151.17122)
	
});

var marker2 = new google.maps.Marker({
    map: map,
    icon: 'sbc_icon2sm.png',
    position: new google.maps.LatLng(-33.90433, 151.19577)
	
});

var concrete_cafe = new google.maps.Marker({
    map: map,
    icon: 'sbc_icon2sm.png',
    position: new google.maps.LatLng(-33.88547, 151.20172)
	
});


	var preach_cafe = new google.maps.Marker({
    map: map,
    icon: 'sbc_icon2sm.png',
    position: new google.maps.LatLng(-33.89129, 151.27348)
	
});


var baby_coffee = new google.maps.Marker({
    map: map,
    icon: 'sbc_icon2sm.png',
    position: new google.maps.LatLng(-33.9005, 151.20633)
	
});

// Set up handle bars
var template = Handlebars.compile($('#marker-content-template').html());

// Set up a close delay for CSS animations
var info = null;
var closeDelayed = false;
var closeDelayHandler = function() {
    $(info.getWrapper()).removeClass('active');
    setTimeout(function() {
        closeDelayed = true;
        info.close();
    }, 300);
};
//Info Window to the marker

info = new SnazzyInfoWindow({
    //if(marker==marker2)
	marker: marker2,
    wrapperClass: 'custom-window',
    offset: {
        top: '-35px'
    },
    edgeOffset: {
        top: 50,
        right: 60,
        bottom: 50
    },
    border: false,
    closeButtonMarkup: '<button type="button" class="custom-close">&#215;</button>',
    content: template({
        title: 'Nelson Nest',
        //subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
        bgImg: 'nelsonnest.png',
        body: 	'<p><i>The secret ingredient is always love and you will be sure to find it</p></i> '+
				'echo $(this.getWrapper())'+
				'<p><mark><ins>Open</ins>:</p></mark>'+
				'<p>6am - 3pm Weekdays</p>'+
				'<p>7am - 3pm Weekends</p>'
    }),
    callbacks: {
        open: function() {
            $(this.getWrapper()).addClass('open');
        },
        afterOpen: function() {
            var wrapper = $(this.getWrapper());
            wrapper.addClass('active');
            wrapper.find('.custom-close').on('click', closeDelayHandler);
        },
        beforeClose: function() {
            if (!closeDelayed) {
                closeDelayHandler();
                return false;
            }
            return true;
        },
        afterClose: function() {
            var wrapper = $(this.getWrapper());
            wrapper.find('.custom-close').off();
            wrapper.removeClass('open');
            closeDelayed = false;
        }
    }
});





 	info = new SnazzyInfoWindow({
    marker: cafe_06,
    wrapperClass: 'custom-window',
    offset: {
        top: '-35px'
    },
    edgeOffset: {
        top: 50,
        right: 60,
        bottom: 50
    },
    border: false,
    closeButtonMarkup: '<button type="button" class="custom-close">&#215;</button>',
    content: template({
        title: '0.6 CAFE',
        //subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
        bgImg: 'cafe06.png',
        body: 	'<p><i>Rolling into the weekend with a magic matcha brunch</p></i> '+
				'<p>Alexandria best coffee and brunch</p>'+
				'<p><mark><ins>Open</ins>:</p></mark>'+
				'<p>7am - 4pm Weekdays</p>'+
				'<p>9am - 3pm Weekends</p>'
    }),
    callbacks: {
        open: function() {
            $(this.getWrapper()).addClass('open');
        },
        afterOpen: function() {
            var wrapper = $(this.getWrapper());
            wrapper.addClass('active');
            wrapper.find('.custom-close').on('click', closeDelayHandler);
        },
        beforeClose: function() {
            if (!closeDelayed) {
                closeDelayHandler();
                return false;
            }
            return true;
        },
        afterClose: function() {
            var wrapper = $(this.getWrapper());
            wrapper.find('.custom-close').off();
            wrapper.removeClass('open');
            closeDelayed = false;
        }
    }
});



//------------------------------


 info = new SnazzyInfoWindow({
    marker: concrete_cafe,
    wrapperClass: 'custom-window',
    offset: {
        top: '-35px'
    },
    edgeOffset: {
        top: 50,
        right: 60,
        bottom: 50
    },
    border: false,
    closeButtonMarkup: '<button type="button" class="custom-close">&#215;</button>',
    content: template({
        title: 'Concrete Jungle Cafe',
        //subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
        bgImg: 'concrete.png',
        body: 	'<p><i>A serene oasis from the hustle of Sydney busy streets</p></i> '+
				'<p>Refuel your energy at Concrete Jungle</p>'+
				'<p><mark><ins>Open</ins>:</p></mark>'+
				'<p>6am - 3pm Weekdays</p>'+
				'<p>7am - 3pm Weekends</p>'
    }),
    callbacks: {
        open: function() {
            $(this.getWrapper()).addClass('open');
        },
        afterOpen: function() {
            var wrapper = $(this.getWrapper());
            wrapper.addClass('active');
            wrapper.find('.custom-close').on('click', closeDelayHandler);
        },
        beforeClose: function() {
            if (!closeDelayed) {
                closeDelayHandler();
                return false;
            }
            return true;
        },
        afterClose: function() {
            var wrapper = $(this.getWrapper());
            wrapper.find('.custom-close').off();
            wrapper.removeClass('open');
            closeDelayed = false;
        }
    }
});


	info = new SnazzyInfoWindow({
    marker: preach_cafe,
    wrapperClass: 'custom-window',
    offset: {
        top: '-35px'
    },
    edgeOffset: {
        top: 50,
        right: 60,
        bottom: 50
    },
    border: false,
    closeButtonMarkup: '<button type="button" class="custom-close">&#215;</button>',
    content: template({
        title: 'Preach Cafe',
        //subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
        bgImg: 'preach.png',
        body: 	'<p><i>A great place for brunch in Bondi beach</p></i> '+
				'<p>Enjoy your bowls by the sea</p>'+
				'<p><mark><ins>Open</ins>:</p></mark>'+
				'<p>6am - 3pm Weekdays</p>'+
				'<p>7am - 3pm Weekends</p>'
    }),
    callbacks: {
        open: function() {
            $(this.getWrapper()).addClass('open');
        },
        afterOpen: function() {
            var wrapper = $(this.getWrapper());
            wrapper.addClass('active');
            wrapper.find('.custom-close').on('click', closeDelayHandler);
        },
        beforeClose: function() {
            if (!closeDelayed) {
                closeDelayHandler();
                return false;
            }
            return true;
        },
        afterClose: function() {
            var wrapper = $(this.getWrapper());
            wrapper.find('.custom-close').off();
            wrapper.removeClass('open');
            closeDelayed = false;
        }
    }
});



	info = new SnazzyInfoWindow({
    marker: baby_coffee,
    wrapperClass: 'custom-window',
    offset: {
        top: '-35px'
    },
    edgeOffset: {
        top: 50,
        right: 60,
        bottom: 50
    },
    border: false,
    closeButtonMarkup: '<button type="button" class="custom-close">&#215;</button>',
    content: template({
        title: 'Baby Coffee CO',
        //subtitle: '6am - 3pm Mon - Fri | 7am - 2.30pm Sat - Sun',
        bgImg: 'baby.png',
        body: 	'<p><i>Pink Panther @babycoffeeco, Let me paint your world        .</p></i>'+
				'<p>Enjoy your bowls by the sea</p>'+
				'<p><mark><ins>Open</ins>:</p></mark>'+
				'<p>6am - 3pm Weekdays</p>'+
				'<p>7am - 3pm Weekends</p>'
    }),
    callbacks: {
        open: function() {
            $(this.getWrapper()).addClass('open');
        },
        afterOpen: function() {
            var wrapper = $(this.getWrapper());
            wrapper.addClass('active');
            wrapper.find('.custom-close').on('click', closeDelayHandler);
        },
        beforeClose: function() {
            if (!closeDelayed) {
                closeDelayHandler();
                return false;
            }
            return true;
        },
        afterClose: function() {
            var wrapper = $(this.getWrapper());
            wrapper.find('.custom-close').off();
            wrapper.removeClass('open');
            closeDelayed = false;
        }
    }
});



// Open  Info Window
//info.close();

<button id="buttonOutside" type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<p>modalcontent</p>
			</div>
		</div>
	</div>
</div>

<div class="map-canvas"></div>

<script>
$(function() {
	var map = new google.maps.Map($('.map-canvas')[0], {
		zoom: 14,
		center: new google.maps.LatLng(40.72, -74)
	});
	var marker = new google.maps.Marker({
		map: map,
		position: new google.maps.LatLng(40.72, -74)
	});
	var info = new SnazzyInfoWindow({
		marker: marker,
		content: 'infowindow content<br><button id="buttonInside" type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>'
	});
});	
</script>

Uncaught TypeError: this.setMap is not a function at e.value (snazzy-info-window.min.js:1)