#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    977
    Rep Power
    11

    Display just one infowindow automatically from an array


    I have a Google Map with an array of pointers and infowindows. I want to display a specific infowindow when the page/map is loaded.

    How would I do this:

    This is my code:

    PHP Code:
    function initialize() {

    var 
    map;
    var 
    bounds = new google.maps.LatLngBounds();
    var 
    mapOptions = {
        
    center: new google.maps.LatLng(53.47921, -1.00201),
            
    mapTypeIdgoogle.maps.MapTypeId.ROADMAP

    };


    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    map.setTilt(45);

    // Car Parks
    var markers = [
        [
    'location 1'53.47921, -1.00201],
        [
    'location 2'53.50726,-1.04641],
        [
    'location 3'53.48313,-1.01016],
        [
    'location 4'53.48197,-1.00954],
        [
    'location 5'53.48319,-1.00842]
    ];



    var 
    infoWindowContent = [
        [
    '<div class="info_content">' +
        
    '<strong>text 1' +    
        
    '</div>'],
        [
    '<div class="info_content">' +
        
    '<strong>text 2' +    
        
    '</div>'],
        [
    '<div class="info_content">' +
        
    '<strong>text 3' +    
        
    '</div>'],
        [
    '<div class="info_content">' +
        
    '<strong>text 4' +    
        
    '</div>'],
        [
    '<div class="info_content">' +
        
    '<strong>text 5' +    
        
    '</div>']
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), markeri;

    // Loop through our array of markers & place each one on the map  
    for( 0markers.lengthi++ ) {
        var 
    position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        
    bounds.extend(position);
        
    marker = new google.maps.Marker({
            
    positionposition,
            
    mapmap,
            
    titlemarkers[i][0]
        });

        
    // Allow each marker to have an info window 
        
    google.maps.event.addListener(marker'click', (function(markeri) {
            return function() {
                
    infoWindow.setContent(infoWindowContent[i][0]);
                
    infoWindow.open(mapmarker);
            }
        })(
    markeri));

        
    // Automatically center the map fitting all markers on the screen
        
    map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener google.maps.event.addListener((map), 'bounds_changed', function(event) {
        
    this.setZoom(13);
        
    google.maps.event.removeListener(boundsListener);
    });


    Any help would be great, thanks!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,173
    Rep Power
    184
    The quickest and easiest way (that I see - within your code); would be to take out your "for loop" and assign the variable "i", with which ever infoWindowContent/markers array key that corresponds with the infowindow you would like to display.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    977
    Rep Power
    11
    Thanks, for the reply. Could you show me how I would do this as I am not too sure how to do it?

    Thanks
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,173
    Rep Power
    184
    Instead of this:
    Code:
    // Loop through our array of markers & place each one on the map   
    for( i = 0; i < markers.length; i++ ) { 
    
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
        bounds.extend(position); 
        marker = new google.maps.Marker({ 
            position: position, 
            map: map, 
            title: markers[i][0] 
        }); 
    
        // Allow each marker to have an info window  
        google.maps.event.addListener(marker, 'click', (function(marker, i) { 
            return function() { 
                infoWindow.setContent(infoWindowContent[i][0]); 
                infoWindow.open(map, marker); 
            } 
        })(marker, i)); 
    
        // Automatically center the map fitting all markers on the screen 
        map.fitBounds(bounds); 
    }
    You would do something like this:
    Code:
    // Loop through our array of markers & place each one on the map   
    //for( i = 0; i < markers.length; i++ ) { 
    
        var i = 0; // you would just add the markers/infoWindowContent object key here - right now your object(s) keys range from 0 to 4.
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]); 
        bounds.extend(position); 
        marker = new google.maps.Marker({ 
            position: position, 
            map: map, 
            title: markers[i][0] 
        }); 
    
        // Allow each marker to have an info window  
        google.maps.event.addListener(marker, 'click', (function(marker, i) { 
            return function() { 
                infoWindow.setContent(infoWindowContent[i][0]); 
                infoWindow.open(map, marker); 
            } 
        })(marker, i)); 
    
        // Automatically center the map fitting all markers on the screen 
        map.fitBounds(bounds); 
    //}
    Something along these lines; is what I was talking about.

IMN logo majestic logo threadwatch logo seochat tools logo