Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Google Maps v3. Infowindow with jquery tabs
- var checkText = "Coordinates";
- var content = [
- '<div id="tabs">',
- '<ul>',
- '<li><a href="#tab_1"><span>One</span></a></li>',
- '<li><a href="#tab_2"><span>Two</span></a></li>',
- '</ul>',
- '<div id="tab_1">',
- '<p>Marker i:"</p>'+
- '<form id='button'>'+
- '<div>'+
- '<input type='submit' value='Submit' />'+
- '</div>'+
- '</form>',
- '</div>',
- '<div id="tab_2">',
- '<p>Info: '+checkText+'</p>',
- '</div>',
- '</div>'
- ].join('');
- google.maps.event.addListener(infoWindow, 'domready', function() {
- $("#tabs").tabs();
- });
- google.maps.event.addListener(marker, 'click', function(event) {
- infoWindow.setContent(content);
- infoWindow.open(map, marker);
- });
- marker.draggrable = true; // letting the marker to move
- checkText = marker.getPosition(); // changing the tab info whenever marker moves
- google.maps.event.addListener(marker, 'dragend', function(event) {
- checkText = this.getPosition();
- content = [
- '<div id="tabs">',
- '<ul>',
- '<li><a href="#tab_1"><span>One</span></a></li>',
- '<li><a href="#tab_2"><span>Two</span></a></li>',
- '</ul>',
- '<div id="tab_1">',
- '<p>Marker i:"</p>'+
- '<form id="button">'+
- '<div>'+
- '<input type="submit" value="Submit" />'+
- '</div>'+
- '</form>',
- '</div>',
- '<div id="tab_2">',
- '<p>Info: '+checkText+'</p>',
- '</div>',
- '</div>'
- ].join('');
- });
- (function () {
- var marker = new google.maps.Marker({
- map: map,
- draggable: false,
- position: new google.maps.LatLng(40.30, -3.71)
- });
- var content = "<div id='tabs'>" +
- "<form id='button'>" +
- "<div>" +
- "<input id='btn' type='submit' value='Submit'/>" +
- "</div>" +
- "</form>" +
- "</div>";
- google.maps.event.addListener(marker, 'click', function (event) {
- infoWindow.setContent(content);
- infoWindow.open(map, this);
- map.setCenter(this.getPosition());
- });
- google.maps.event.addListener(infoWindow, 'domready', function (e) {
- //attach the click event to the button.
- document.forms.button.btn.onclick = function (e) {
- e.preventDefault(); //cancels the post back.
- var currentZoomLevel = map.getZoom();
- map.setZoom(currentZoomLevel - 2); //zoom out two levels
- };
- });
- })();
Add Comment
Please, Sign In to add comment