Home Ask Login Register

Developers Planet

Your answer is one click away!

Andi Wyder February 2016

Problems with Multiple Google Maps on One Page

Hi i have problems to display more than one Google maps on one page

The first map shows correctly but the second doesnt show

I use Smarty to display templates. The results comes from a db. Can anybody check the code and help me to display more than one map

{foreach item=row  from=$adress}
                    <script type="text/javascript">
                      function initialize() {
                        var position = new google.maps.LatLng({$row->lat}, {$row->longi});
                        var myOptions = {
                          zoom: 12,
                          center: position,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                        var map = new google.maps.Map(

                        var marker = new google.maps.Marker({
                            position: position,
                            map: map,
                            title:"This is the place."

                        var contentString = 'Hello <strong>World</strong>!';
                        var infowindow = new google.maps.InfoWindow({
                            content: contentString

                        google.maps.event.addListener(marker, 'click', function() {


                  <div id="map_canvas{$row->site_id}" style="width:300px;height:200px;"></div>


Plum February 2016

Here is your html code:-

<body onload="initialize()">
<H1 align="center">Two Google maps side-by-side</h1>
<div id="map_canvas1" style="top: 10px; left: 25px; width:210px; height:220px; float: left"></div>
<div id="map_canvas2" style="top: 10px; left: 75px; width:210px; height:220px"></div>


    function initialize()

    for($i=1; $i<=2; $i++){


        var latlng<?php echo $i ?> = new google.maps.LatLng(18.520266,73.856406);

        var myOptions =
            zoom: 15,
            center: latlng<?php echo $i; ?>,
            mapTypeId: google.maps.MapTypeId.ROADMAP

        var map<?php echo $i; ?> = new google.maps.Map(document.getElementById("map_canvas<?php echo $i ?>"), myOptions);

        var myMarker<?php echo $i; ?> = new google.maps.Marker(
            position: latlng<?php echo $i; ?>,
            map: map<?php echo $i; ?>,

    <?php } ?>



I know you are using different programming language to define your code. But the logic i hope you understood.

Post Status

Asked in February 2016
Viewed 3,642 times
Voted 11
Answered 1 times


Leave an answer

Quote of the day: live life