SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,226
    Mentioned
    194 Post(s)
    Tagged
    2 Thread(s)
    I have no experience with using the Google Maps API, so I may be way off base.

    But I think that, similar to how you have
    infoWindow.open(map, marker);
    inside a click event listener, you could have one inside a page load listener as well, no?


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
  •