CODEWITHSUNDEEP
phpgoogle-maps-api-3
Houx
Houx

Reputation: 265

Google map api v3 issue

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

I need to display them with more than one map, and i don't know the number of maps.

Here the code php code:

<script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA5DRxSgUpWIfkLYULGijHXFQdogRElRIg&sensor=false">
</script>
<?php
for ($i = 1; $i <= 4; $i++) {
    echo "map n:" . $i . "<br/>";
    ?><script>
        function initialize(ltd,lgd) {
            var myOptions = {
                center: new google.maps.LatLng(ltd, lgd ),
                zoom: 15,
                panControl: false,
                zoomControl: false,
                mapTypeControl: false,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas<?php echo $i ?>"),
            myOptions);
            google.maps.event.addListener(map, 'click', function(event) {
                placeMarker(event.latLng);
            });
            var marker;
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(ltd, lgd),
                map: map
            });
        }
    </script>
    <?php echo "<body onload='initialize(36.835769,10.247693)'>"; ?>
    <div id="map_canvas<?php echo $i ?>" style="margin-top:18px; width: 136px; height: 136px;"></div>
    <?php
}
?>

Thanks for any help :)

Upvotes: 0

Views: 278

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117314

You're creating the function initialize multiple times, what is useless, the function will be overwritten each time.

Use the function only 1 time and pass the id of the map as argument:

<script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script>
        function initialize(ltd,lgd,map) {
            var myOptions = {
                center: new google.maps.LatLng(ltd, lgd ),
                zoom: 15,
                panControl: false,
                zoomControl: false,
                mapTypeControl: false,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById(map),
            myOptions);
            google.maps.event.addListener(map, 'click', function(event) {
                placeMarker(event.latLng);
            });
            var marker;
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(ltd, lgd),
                map: map
            });
        }
    </script>
<?php
for ($i = 1; $i <= 4; $i++) {
    echo "map n:" . $i . "<br/>";
    ?>
    <div id="map_canvas<?php echo $i ?>" 
         style="margin-top:18px; width: 136px; height: 136px;"></div>
    <script>
    google.maps.event
     .addDomListener(window, 
                    'load', 
                    function()
                    {
                     initialize(36.835769,
                                10.247693,
                                'map_canvas<?php echo $i;?>')});
    </script>
    <?php
}
?>

Upvotes: 1

Related Questions