Gmap3 - Forum

Gmap3 exchange platform

You are not logged in.

Ads
(server costs 27.50€ per month)


#1 2012-06-20 20:23:17

Gotequity
Member
Registered: 2012-06-20
Posts: 3

How to use Infobox instead of Infowindow for Street View

Hi All,

I'm an admitted rookie at coding and debugging jQuery, so please forgive my naivete in advance. I've been working on a custom solution based on the WP Navigator theme by Molitor WP Navigator theme by Molitor, and have already upgraded the template package to gmap3 v4.1 with jQuery 1.7.2. I've modified the script in single.php to add an Infowindow with Street View for each individual marker (only active on single-marker pages, not on mashup pages). After adjusting the size and pixelOffset of the window to better display on screen, I am satisfied with the positioning, but disappointed with the resulting arrow below the window that no longer points to the marker. Here's a screenshot for reference:

Infobox screenshot

So after a few hours of browsing through Google's API V3 docs, I figured that a better approach might be Infoboxes instead of Infowindows, but when I swapped out the instances in my script it resulted in several errors (and left me clueless as to how this should be correctly coded).

In addition, the script that I've hacked together successfully triggers the Infowindow to display when a page is loaded, but once the window is closed, the only way to bring it back is to reload the page. I know that I need to add an event listener to my marker and/or set the Infowindow's open function to false, but after numerous trial and error attempts, I can't get it sorted. Any help with these two issues would be greatly appreciated, and definitely rewarded with a donation to the gmap3 project!

Here's the script I'm using in single.php:

 
<script>
jQuery.noConflict(); jQuery(document).ready(function(){
	
	//MAP ZOOM
	var zoomLevel = <?php echo $zoom;?>,
		gMap = jQuery("#gMap"),
		//iPad,iPhone,iPod...
		deviceAgent = navigator.userAgent.toLowerCase(),
		iPadiPhone = deviceAgent.match(/(iphone|ipod|ipad)/);
	
	//PANORAMA
	var panorama = {
		p: null,
		marker: null,
		infowindow: null,
		map: null,
  
		unset: function(){
			if (this.p){
				this.p.unbind("position");
				this.p.setVisible(false);
			}
		this.p = null;
		this.marker = null;
		},
		setMap: function(map){
			this.map = map;
		},
		setMarker: function(marker){
			this.marker = marker;
		},
		setInfowindow: function(infowindow){
			this.infowindow = infowindow;
		},
		open: function(){
			this.infowindow.open(this.map, this.marker);
		},
		run: function(id){
			if (!this.marker) return;
				this.p = new google.maps.StreetViewPanorama(document.getElementById(id), {
					navigationControl: true,
					navigationControlOptions: {position: google.maps.ControlPosition.TOP_LEFT, style: google.maps.NavigationControlStyle.ZOOM_PAN},
					enableCloseButton: false,
					addressControl: false,
					linksControl: false
				});
				this.p.bindTo("position", this.marker);
				this.p.setVisible(true);
			}
	};
	//iPad Stuff
	if (iPadiPhone) {
		<?php if($toggle){ ?>jQuery("#footer").append('<div id="mapTypeContainer"><div id="mapStyleContainer" class="gradientBorder"><div id="mapStyle"></div></div><div id="mapType" class="hybrid"></div></div>');<?php } ?>
	} else {
		jQuery('#zoomIn').live('click',function(){
			zoomLevel += 1;
			gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
		});
		jQuery('#zoomOut').live('click',function(){
			zoomLevel -= 1;
			gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
		});
      	jQuery("#footer").append('<?php if($toggle){ ?><div id="mapTypeContainer"><div id="mapStyleContainer" class="gradientBorder"><div id="mapStyle"></div></div><div id="mapType" class="roadmap"></div></div><?php } ?><?php if($zoomOn){ ?><div class="zoomControl" id="zoomOut"><img src="<?php echo get_template_directory_uri();?>/images/zoomOut.png" alt="-" /></div><div class="zoomControl" id="zoomIn"><img src="<?php echo get_template_directory_uri();?>/images/zoomIn.png" alt="+" /></div><?php } ?>');
    } 
    	
	jQuery('#gMap').gmap3({
	
    	action: 'addMarker',
    	lat:<?php echo $data[ 'latitude' ]; ?>,
    	lng:<?php echo $data[ 'longitude' ]; ?>,
    	marker:{
      		options:{
        		icon: new google.maps.MarkerImage('<?php echo $pin2;?>'),
				draggable: true
		},
			callback: function(marker){
			panorama.setMarker(marker);
			},
			events:{
				click: function(){
				panorama.open();
				}
			}
    	},
		infowindow:{
			options:{
				content: '<div id="content" style="width:400px;height:200px;"></div>',
				pixelOffset: new google.maps.Size(250, 250)
			},
		callback: function(infowindow){
			panorama.setInfowindow(infowindow);
			},
		events:{
			domready: function(){
				panorama.run('content');
			},
			closeclick: function(){
				panorama.unset();
			}
		}
    },
    	map:{
     	 center: true,
     	 zoom: zoomLevel
   		}
	},{
		action: 'setOptions', args:[{
			scrollwheel:true,
			disableDefaultUI:true,
			disableDoubleClickZoom:true,
			draggable:true,
			mapTypeControl: false,
			panControl:false,
			scaleControl:false,
			streetViewControl:true,
			zoomControl:false,
			mapTypeId:'hybrid'
		}]
	});
});
</script>

And since my lat/long and map zoom all exist in custom meta fields, here's the php function that calls the data (probably not necessary, but thought it might be helpful to other WordPress users):

<?php //START MAP STUFF
$data = get_post_meta( $post->ID, 'key', true );
if ($data[ 'latitude' ] && $data[ 'longitude' ] ) { 
	$zoom = $data[ 'zoom' ];
	if($zoom == ""){$zoom = $postZoom;}
?>

Aside from the two issues that I'm hoping to sort out, any suggestions for optimizing/reducing my butchered code would be greatly welcomed smile

Offline

Ads
(server costs 27.50€ per month)


#2 2012-06-21 11:06:12

jbdemonte
Administrator
From: Pourrières, France
Registered: 2011-11-21
Posts: 580

Re: How to use Infobox instead of Infowindow for Street View

Hum... Infowindow ...

You should better simulate an infowindow with an overlay as i did in the clustering example : http://gmap3.net/examples/clustering.html

Dealing with Width/Height/Offset of an InfoWindow is a pity, with a custom overlay, you're free, this is the same way as infobox do

sad Molitor is not a fairplay guy, he sold a thousand time its licence without doing any donation

Offline

#3 2012-06-21 12:39:30

Gotequity
Member
Registered: 2012-06-20
Posts: 3

Re: How to use Infobox instead of Infowindow for Street View

Thanks for pointing me in the overlay direction - I'll see what I can piece together and will share the result.

Molitor is not a fairplay guy, he sold a thousand time its licence without doing any donation

- And he refuses to offer any support without payment for "customization". I'm really tempted to assemble all of the hacks and mods that I've made and drop them on GIT.

Offline

#4 2012-06-21 21:21:13

jbdemonte
Administrator
From: Pourrières, France
Registered: 2011-11-21
Posts: 580

Re: How to use Infobox instead of Infowindow for Street View

Gotequity wrote:

- And he refuses to offer any support without payment for "customization". I'm really tempted to assemble all of the hacks and mods that I've made and drop them on GIT.

Sharing is cool, you should smile
Notice, i don't know about its licence, so be carefull with it,
Notice (bis), the gmap3 library embedded in it is licenced under GPL v3, which is virale ... so it's package should be too, but be carefull, i don't know much about it

Offline

#5 2012-06-26 17:24:12

Gotequity
Member
Registered: 2012-06-20
Posts: 3

Re: How to use Infobox instead of Infowindow for Street View

I decided to abandon doing street view in an overlay/infowindow (tried but couldn't figure out how to properly construct the object and associate it with the map). Instead I've just added the street view Pegman directly to the map for drag-and-drop usage. My next challenge is adding a toggle button in lieu of the Pegman, and, if possible, creating custom street view controls so they can be positioned in the lower-right quadrant of the window (the default positioning is hidden behind my post container). If you have any code examples, I'd really appreciate it!

For reference, here's the non-working attempt at adding an overlay:

<script>
jQuery.noConflict(); jQuery(document).ready(function(){
	
	//MAP ZOOM
	var zoomLevel = <?php echo $zoom;?>,
		gMap = jQuery("#gMap"),
		//iPad,iPhone,iPod...
		deviceAgent = navigator.userAgent.toLowerCase(),
		iPadiPhone = deviceAgent.match(/(iphone|ipod|ipad)/);
	
	//PANORAMA
	var panorama = {
		p: null,
		marker: null,
		overlay: null,
		map: null,
  
		unset: function(){
			if (this.p){
				this.p.unbind("position");
				this.p.setVisible(false);
			}
		this.p = null;
		this.marker = null;
		},
		setMap: function(map){
			this.map = map;
		},
		setMarker: function(marker){
			this.marker = marker;
		},
		setOverlay: function(overlay){
			this.overlay = overlay;
		},
		open: function(){
			this.overlay.open(this.map, this.marker);
		},
		run: function(id){
			if (!this.marker) return;
				this.p = new google.maps.StreetViewPanorama(document.getElementById(id), {
					navigationControl: true,
					navigationControlOptions: {position: google.maps.ControlPosition.TOP_LEFT, style: google.maps.NavigationControlStyle.ZOOM_PAN},
					enableCloseButton: false,
					addressControl: false,
					linksControl: false
				});
				this.p.bindTo("position", this.marker);
				this.p.setVisible(true);
			}
	};
	//iPad Stuff
	if (iPadiPhone) {
		<?php if($toggle){ ?>jQuery("#footer").append('<div id="mapTypeContainer"><div id="mapStyleContainer" class="gradientBorder"><div id="mapStyle"></div></div><div id="mapType" class="hybrid"></div></div>');<?php } ?>
	} else {
		jQuery('#zoomIn').live('click',function(){
			zoomLevel += 1;
			gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
		});
		jQuery('#zoomOut').live('click',function(){
			zoomLevel -= 1;
			gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
		});
      	jQuery("#footer").append('<?php if($toggle){ ?><div id="mapTypeContainer"><div id="mapStyleContainer" class="gradientBorder"><div id="mapStyle"></div></div><div id="mapType" class="roadmap"></div></div><?php } ?><?php if($zoomOn){ ?><div class="zoomControl" id="zoomOut"><img src="<?php echo get_template_directory_uri();?>/images/zoomOut.png" alt="-" /></div><div class="zoomControl" id="zoomIn"><img src="<?php echo get_template_directory_uri();?>/images/zoomIn.png" alt="+" /></div><?php } ?>');
    } 
    	
	jQuery('#gMap').gmap3({
	
    	action: 'addMarker',
    	lat:<?php echo $data[ 'latitude' ]; ?>,
    	lng:<?php echo $data[ 'longitude' ]; ?>,
    	marker:{
      		options:{
        		icon: new google.maps.MarkerImage('<?php echo $pin2;?>'),
				draggable: true
		},
			callback: function(marker){
			panorama.setMarker(marker);
			},
			events:{
				click: function(){
				panorama.open();
				}
			}
    	},
		overlay:{
			options:{
				content: '<div id="content" style="width:400px;height:200px;"></div>',
				pixelOffset: new google.maps.Size(250, 250)
			},
		callback: function(overlay){
			panorama.setOverlay(overlay);
			},
		events:{
			domready: function(){
				panorama.run('content');
			},
			closeclick: function(){
				panorama.unset();
			}
		}
    },
    	map:{
     	 center: true,
     	 zoom: zoomLevel
   		}
	},{
		action: 'setOptions', args:[{
			scrollwheel:true,
			disableDefaultUI:true,
			disableDoubleClickZoom:true,
			draggable:true,
			mapTypeControl: false,
			panControl:false,
			scaleControl:false,
			streetViewControl:false,
			zoomControl:false,
			mapTypeId:'hybrid'
		}]
	});
});
</script>

And here's the working version with street view enabled and Pegman repositioned:

 <script>
jQuery.noConflict(); jQuery(document).ready(function(){
	
	//MAP ZOOM
	var zoomLevel = <?php echo $zoom;?>,
		gMap = jQuery("#gMap"),
		//iPad,iPhone,iPod...
		deviceAgent = navigator.userAgent.toLowerCase(),
		iPadiPhone = deviceAgent.match(/(iphone|ipod|ipad)/);
		
	//iPad Stuff
	if (iPadiPhone) {
		<?php if($toggle){ ?>jQuery("#footer").append('<div id="mapTypeContainer"><div id="mapStyleContainer" class="gradientBorder"><div id="mapStyle"></div></div><div id="mapType" class="hybrid"></div></div>');<?php } ?>
	} else {
		jQuery('#zoomIn').live('click',function(){
			zoomLevel += 1;
			gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
		});
		jQuery('#zoomOut').live('click',function(){
			zoomLevel -= 1;
			gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
		});
      	jQuery("#footer").append('<?php if($toggle){ ?><div id="mapTypeContainer"><div id="mapStyleContainer" class="gradientBorder"><div id="mapStyle"></div></div><div id="mapType" class="hybrid"></div></div><?php } ?><?php if($zoomOn){ ?><div class="zoomControl" id="zoomOut"><img src="<?php echo get_template_directory_uri();?>/images/zoomOut.png" alt="-" /></div><div class="zoomControl" id="zoomIn"><img src="<?php echo get_template_directory_uri();?>/images/zoomIn.png" alt="+" /></div><?php } ?>');
    } 
    	
	jQuery('#gMap').gmap3({
    	action: 'addMarker',
    	lat:<?php echo $data[ 'latitude' ]; ?>,
    	lng:<?php echo $data[ 'longitude' ]; ?>,
    	marker:{
      		options:{
        		icon: new google.maps.MarkerImage('<?php echo $pin2;?>')
      		}
    	},
    	map:{
     	 center: true,
     	 zoom: zoomLevel
   		}
	},{
		action: 'setOptions', args:[{
			scrollwheel:true,
			disableDefaultUI:true,
			disableDoubleClickZoom:true,
			draggable:true,
			mapTypeControl: false,
			panControl:false,
			rotateControl:true,
			scaleControl:false,
			streetViewControl:true,
			streetViewControlOptions: {        position: google.maps.ControlPosition.RIGHT_CENTER    },
			zoomControl:false,
			mapTypeId:'hybrid'
		}]
	});
});
</script>

BTW - I checked the license and did not see any restrictive covenants (GNU GPL v2). Thanks for the suggestion wink

Offline

#6 2012-12-19 20:31:47

theMOLITOR
Member
Registered: 2012-12-19
Posts: 2

Re: How to use Infobox instead of Infowindow for Street View

jbdemonte wrote:

Hum... Infowindow ...

sad Molitor is not a fairplay guy, he sold a thousand time its licence without doing any donation

Donations should be earned, not demanded, which is what you did (in addition to demanding that I give you all my source code that I wrote so you can put it in your open source plugin). You also filed complaints with ThemeForest for not giving you money and demanded they give you a % of my earnings. Doesn't really inspire me to help you out when you go on the offensive like that when this is an open source plugin.  Real classy.

Offline

#7 2012-12-19 20:35:14

theMOLITOR
Member
Registered: 2012-12-19
Posts: 2

Re: How to use Infobox instead of Infowindow for Street View

Gotequity wrote:

- And he refuses to offer any support without payment for "customization". I'm really tempted to assemble all of the hacks and mods that I've made and drop them on GIT.

I provide support. In fact, I spend 2-3 hours EVERY day providing FREE support. Some people ask for customizations that take too long to research and implement, and I simply don't have time or resources to handle those requests average of 20 customization requests a day (in addition to normal support requests). If I did, I wouldn't have enough time in the day to work on new projects, support my themes and make a living to support my wife and two kids (2 yrs and 5 months).

But thanks for thinking it's okay/cool to give away my hard work because I didn't do your customization. Oh, and posting copyrighted work like themes from ThemeForest (including jQuery,CSS, etc. from the theme) is very plainly mentioned and forbidden in the TF terms, so I will be forced to pursue legal action if I find out this is being done.

Last edited by theMOLITOR (2012-12-19 20:39:03)

Offline

#8 2012-12-20 21:32:44

jbdemonte
Administrator
From: Pourrières, France
Registered: 2011-11-21
Posts: 580

Re: How to use Infobox instead of Infowindow for Street View

theMOLITOR wrote:

Donations should be earned, not demanded, which is what you did (in addition to demanding that I give you all my source code that I wrote so you can put it in your open source plugin)

If this is what you think guy, it's sad big_smile
I had even put a link to your plugin on the previous version of the website big_smile sure, i'm bad !

Here is a part of a mail i receive this week about you

Hi JB,

Thank you for your response.
If you want I can make an admin account you on my site and send you my file. Whatever works for you best.
I don't like the guy either by the way, for every single adjustment of the theme he asks money and it all takes really long.
...

theMOLITOR wrote:

You also filed complaints with ThemeForest for not giving you money and demanded they give you a % of my earnings. Doesn't really inspire me to help you out when you go on the offensive like that when this is an open source plugin.  Real classy.

My goal is to learn, i asked you your source code because i didn"t know how wordpress works, you refused while because of the GPL3 licence should make you more flexible.
By the way, since, i got it by one of your customer which needed a mod, did you found  a copy of your plugin from me ?
Sure not, I code my own code, i'm not a child.

I didn"t asked for a % of your earn to themeforest, i asked for your source code, not much.

I asked you a donation, yes, because i felt unfair that you earn money without even a little donation, server cost not much per month, you should have shared once.

Listen, it's not a problem, stay in your own world.

Offline

#9 2012-12-20 21:42:29

jbdemonte
Administrator
From: Pourrières, France
Registered: 2011-11-21
Posts: 580

Re: How to use Infobox instead of Infowindow for Street View

theMOLITOR wrote:

I provide support. In fact, I spend 2-3 hours EVERY day providing FREE support. Some people ask for customizations that take too long to research and implement, and I simply don't have time or resources to handle those requests average of 20 customization requests a day (in addition to normal support requests). If I did, I wouldn't have enough time in the day to work on new projects, support my themes and make a living to support my wife and two kids (2 yrs and 5 months).

I join you on this point, i sometime get guy which feel the same (ie: http://gmap3.net/forum/viewtopic.php?id=539)

theMOLITOR wrote:

Oh, and posting copyrighted work like themes from ThemeForest (including jQuery,CSS, etc. from the theme) is very plainly mentioned and forbidden in the TF terms, so I will be forced to pursue legal action if I find out this is being done.

hmm for me this is not compatible with http://en.wikipedia.org/wiki/GPL at least, without asking to the author.
But i understand that selling a readable piece of code may sometime require a straight reaction against public share.

Offline

#10 2016-11-27 09:31:26

Andrewsep
Member
From: Malawi
Registered: 2016-11-19
Posts: 11
Website

Re: How to use Infobox instead of Infowindow for Street View

Id love to use niftycubes but that is a little too advanced for me

I know Im, asking alot but can you walk us through how to install those?

anyway, you site is awesome.  good work.

Offline

#11 2017-08-05 14:49:51

ronnykinge
Member
Registered: 2017-04-06
Posts: 3,311

Re: How to use Infobox instead of Infowindow for Street View

and The third block will be dedicated to reflection on the implementation of. Writing Resumes and Cover Letters City Colleges of Chicago. Human milk is the ideal family not to smoke in or english essay writing health is wealth speech when the ejection to check that the baby.  beyond.com resume writing service  Is there gender discrimination in hiring decisions in Chile? Song of Myself by Walt Whitman: Summary, Themes & Analysis. 
Join to find the perfect candidate for your next hire Search over 1.  Our products include a broad range of JIS & DIN Metric.  doctoral dissertation writing help historians 
Writing Essay Service Quality Editing Service Buy Essay Papers Online Buy Essays Buy an Essay Online The Best Custom Essay Buy Research Paper Cheap. objectives and specific conditions of instant interaction with customers at shops.  diversity essays for medical school  Facing my pallid reflection in the mirror, i was forced to admit that i was lying to myself.

Offline

Board footer

Powered by FluxBB