SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    May 2012
    Location
    Sydeny
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Center latest post on Wordpress map

    I have set up my theme to plot my posts on a map using a geo coder plugin and then calling the lattitude and longditude form with in a loop to display all my posts and this is working really well. But now I am at a bit of a road block as I now want my latest post to be the point that is centered, currently I am using fixed coordinates to center the map.

    Here is what I am doing.

    The JS:
    Code:
    var infowindow = new google.maps.InfoWindow();
    var pinkmarker = new google.maps.MarkerImage('/wp-content/themes/maps/pink_Marker.png', new google.maps.Size(20, 34) );
    var shadow = new google.maps.MarkerImage('/wp-content/themes/maps/shadow.png', new google.maps.Size(37, 34) );
    
    function initialize() {
    	
    	map = new google.maps.Map(document.getElementById('map'), { 
    		zoom: 4,
    		minZoom:3, 
    		center: new google.maps.LatLng(24.4666667, 54.366666699999996),
    		navigationControl: false,
            backgroundColor:'none',
            streetViewControl: false,
    	 	mapTypeControl: false, 
    	 	rotateControl:true,
    		mapTypeId: google.maps.MapTypeId.ROADMAP 
    	});
    	var infobox;
    	
    	infobox = new InfoBox({
             content: document.getElementById("infobox"),
             disableAutoPan: false,
             maxWidth: 150,
             pixelOffset: new google.maps.Size(-140, 0),
             zIndex: null,
             boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.75,
                width: "280px"
            },
            closeBoxMargin: "12px 4px 2px 2px",
            closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
            infoBoxClearance: new google.maps.Size(1, 1)
        });
    
    	for (var i = 0; i < locations.length; i++) {  
    		var marker = new google.maps.Marker({
    	    	position: locations[i].latlng,
    			icon: pinkmarker,
    			shadow: shadow,
    			map: map
    		});
        
    	    google.maps.event.addListener(marker, 'click', function(marker, i) {
    	      return function() {
    	      	infobox.setContent(locations[i].info);
    	        infobox.open(map, marker);
    	        map.panTo(locations[i].latlng);
    	      }
    		}(marker, i));
    	}
    
    }
    and the php:
    PHP Code:
    <?php if ( have_posts() ) : ?>
                <!-- WordPress has found matching posts -->
                <div style="display: none;">
                    <?php $i 1?>
                    <?php while ( have_posts() ) : the_post(); ?>
                        <?php if ( get_geocode_latlng($post->ID) !== '' ) : ?>
                            <div id="item<?php echo $i?>">
                                <p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
                                <?php the_content(); ?>
                            </div>
                        <?php endif; ?>
                        <?php $i++;    ?>
                    <?php endwhile; ?>
                </div>
                <script type="text/javascript">
                    var locations = [
                        <?php  $i 1; while ( have_posts() ) : the_post(); ?>
                            <?php if ( get_geocode_latlng($post->ID) !== '' ) : ?>
                                {
                                    latlng : new google.maps.LatLng<?php echo get_geocode_latlng($post->ID); ?>
                                    info : document.getElementById('item<?php echo $i?>')
                            },
                            <?php endif; ?>
                        <?php $i++; endwhile; ?>
                    ];
                </script>
                <div id="map" style="width: 100%; height: 100%;"></div>

            <?php else : ?>
                <!-- No matching posts, show an error -->
                <h1>Error 404 &mdash; Page not found.</h1>
            <?php endif; ?>
    This basicly allows me to pull the posts with get_geocode_latlng and then plot them on the map as well as include a infobox with each one.

    Any ideas on how I could get this to centre on the latest post?

  2. #2
    SitePoint Member
    Join Date
    May 2012
    Location
    Sydeny
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I managed to figure this out. if anyone eles is interested here is what you do.

    Move the js to the index.php:

    Code:
     <script  type="text/javascript">
    		var infowindow = new google.maps.InfoWindow();
    		var shadow = new google.maps.MarkerImage('/wp-content/themes/maps/shadow.png', new google.maps.Size(37, 34) );
    		
    		function initialize() {
    			
    			<?php
    
    			$the_query = new WP_Query('showposts=1');
    
    			while ( $the_query->have_posts() ) : $the_query->the_post();
    				$coordinates = get_geocode_latlng($post->ID);
    			endwhile;
    
    			?>
    			
    			map = new google.maps.Map(document.getElementById('map'), { 
    				zoom: 4,
    				minZoom:3, 
    				center: new google.maps.LatLng<?php echo $coordinates ?>,
    				navigationControl: false,
    		        backgroundColor:'none',
    		        streetViewControl: false,
    			 	mapTypeControl: false, 
    			 	rotateControl:true,
    				mapTypeId: google.maps.MapTypeId.ROADMAP 
    			});
    			var infobox;
    			
    			infobox = new InfoBox({
    		        content: document.getElementById("infobox"),
    		        disableAutoPan: false,
    		        maxWidth: 150,
    		        pixelOffset: new google.maps.Size(-140, 0),
    		        zIndex: null,
    		        boxStyle: {
    		        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
    		        opacity: 0.75,
    		        width: "280px"
    		        },
    		        closeBoxMargin: "12px 4px 2px 2px",
    		        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    		        infoBoxClearance: new google.maps.Size(1, 1)
    		    });
    		
    			for (var i = 0; i < locations.length; i++) {  
    				var marker = new google.maps.Marker({
    			    	position: locations[i].latlng,
    					/* icon: pinkmarker, */
    					icon: locations[i].marker,
    					shadow: shadow,
    					map: map
    				});
    		    
    			    google.maps.event.addListener(marker, 'click', function(marker, i) {
    			      return function() {
    			      	infobox.setContent(locations[i].info);
    			        infobox.open(map, marker);
    			        map.panTo(locations[i].latlng);
    			      }
    				}(marker, i));
    			}
    		
    		}
    		</script>
    The query will get the Geo latlng for the latest post and place it in the center.


Tags for this Thread

Bookmarks

Posting Permissions

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