如何使用API​​ V3在页面中显示多个Google Maps

Question

I'm using google map API v3, and i have an issue.

I get my coordinates from data base and i need to display them with more than one map, and i don't know the number of maps.

Here the code php code:

<div id="view-content">
            <?php foreach ($this->tag as $tag) : ?>

                <div id="list">
                    <div id="left">
                        <div id="map_canvas" style=" margin-left: 5px; width: 136px; height: 136px;"></div>
                    </div>
                    <div id="right">
                        <div id="listtitre">
                            <a href="<?php echo $this->url(array('action' => 'maptag', 'controller' => 'maptag', 'module' => 'agent', 'idtag' => $tag['idtag'])); ?>"> 
                                <?php echo $tag['name']; ?>
                            </a>
                        </div>
                        <div id="tagdisctitle">
                            <font>Address: </font><br/>
                            <font>Latitude: </font><br/>
                            <font>Longitude: </font><br/>
                        </div>
                        <div id="taglistdisc">
                            <?php
                            if (strlen($tag["address"]) > 52)
                                echo substr($tag["address"], 0, 52) . "...";
                            else
                                echo substr($tag["address"], 0, 52) . ".";
                            ?> <br/>
                            <?php echo $tag['latitude']; ?><br/>
                            <?php echo $tag['longitude']; ?><br/>
                        </div>
                    </div> 
                </div>
            <?php endforeach; ?>
        </div>

The JS code:

function initialize() {
    var myOptions = {
        center: new google.maps.LatLng(36.6464862, 9.9565553 ),
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });

    var marker;
    function placeMarker(location) {
        if(marker){ //on vérifie si le marqueur existe
            marker.setPosition(location); //on change sa position
        }else{
            marker = new google.maps.Marker({ //on créé le marqueur
                position: location, 
                map: map,
                icon : "/images/mapgo.png"
            });
        }
        latitude.value=location.lat();
        longitude.value=location.lng();
    }

}

Thanks for any help

Answer 1

IDs must be unique on the page. Since you are outputting your HTML in a loop you are creating duplicate IDs, including the map_canvas div. You need to modify both your HTML and javascript so that a unique ID is created on each iteration. The simplest way to do this would be to keep a running counter that you increment on each iteration, and then include this counter in the ID:

<div id="map_canvas<?=$counter?>"> [...] </div>

you'll then need to change your JS to use this as well.