Question

I have project with Google Maps v3. And I have problem with showing data in infowindows of multiple marker. When I try to make infowindow for each markers, the map doesn’t show at all. I’m sure I’ve missed something but I don’t know what to do. So here is my code :

...
<script type="text/javascript">
        var pinImage = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900",
        new google.maps.Size (70, 83),
        new google.maps.Point (0,0),
        new google.maps.Point (10,34));
    var pinShadow = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size (89, 85),
        new google.maps.Point (0, 0),
        new google.maps.point (12, 35));
        var map;
    function initialize() {
    var myLatlng = new google.maps.LatLng(41.258531,-96.012599);
    var myOptions = {
    zoom: 2,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var infoWindow = new google.maps.InfoWindow;
    <?php
    $posisi = array();
    $keterangan = array();
    foreach ($integer as $lokasi) {
    $query = "SELECT cl.locId, cl.country as country, cl.region as region, cl.city as city, cl.postalCode as postalCode, cl.latitude as latitude, cl.longitude as longitude, cl.metroCode as metroCode, cl.areaCode as areaCode
    FROM (SELECT locId as idcihuy FROM cityblocks WHERE $lokasi BETWEEN startIpNum AND endIpNum) cb, citylocation cl WHERE cb.idcihuy = cl.locId";
    $result = mysql_query($query);
    while ($location = @mysql_fetch_assoc($result)){
    $posisi[]= 'new google.maps.LatLng(' . $location['latitude'] . ', ' . $location['longitude'] . ')';
    $keterangan[]= '(' . $location['country'] . ', ' . $location['region'] . ', ' . $location['city'] . ')';
    }
    }
    ?>
     var keterangan = new Array();
 var point = [<?php echo implode(',', $posisi) ?>];
 var lokasi = [<?php echo implode(',', $keterangan) ?>];
 var icon = pinImage;
 for (var i = 0; i < point.length; i++) {
 var html = "<b>" + lokasi[i] + "</b> <br/>" + point[i];
     var marker = new google.maps.Marker({
        map: map,
        position: point[i],
        icon: pinImage,
        shadow: pinShadow
        });
        bindInfoWindow(marker, map, infoWindow, html);
        }
        }
    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }
    </script>

And this is the HTML code (browser output) :

...
var pinImage = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_xpin_letter_withshadow&chld=pin_star|%E2%80%A2|CC3300|000000|FF9900",

        new google.maps.Size (70, 83),

        new google.maps.Point (0,0),

        new google.maps.Point (10,34));

    var pinShadow = new google.maps.MarkerImage ("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",

        new google.maps.Size (89, 85),

        new google.maps.Point (0, 0),

        new google.maps.point (12, 35));

        var map;

    function initialize() {

    var myLatlng = new google.maps.LatLng(41.258531,-96.012599);

    var myOptions = {

    zoom: 2,

    center: myLatlng,

    mapTypeId: google.maps.MapTypeId.ROADMAP

    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var infoWindow = new google.maps.InfoWindow;

         var keterangan = new Array();

     var point = [new google.maps.LatLng(20.0000, 77.0000),new google.maps.LatLng(20.0000, 77.0000),new google.maps.LatLng(38.0000, -97.0000),new google.maps.LatLng(51.7500, -1.2500)];

     var lokasi = [(IN, , ),(IN, , ),(US, , ),(GB, K2, Oxford)];

     var icon = pinImage;

     for (var i = 0; i < point.length; i++) {

      var html = "<b>" + lokasi[i] + "</b> <br/>" + point[i];

     var marker = new google.maps.Marker({

        map: map,

        position: point[i],

        icon: pinImage,

        shadow: pinShadow

        });

        bindInfoWindow(marker, map, infoWindow, html);

        }

        }

    function bindInfoWindow(marker, map, infoWindow, html) {

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

        infoWindow.setContent(html);

        infoWindow.open(map, marker);

      });

    }

    </script>

Please help me o fix this problem. I really really need the help.
Thank You.

Answer 1

Capitalize point to Point in this line: (shadow) new google.maps.Point (12, 35));

Now you are missing quotes in the JavaScript lokasi, because it’s not a proper array. So html never gets built.

I believe this line in PHP

$keterangan[]= '(' . $location['country'] . ', ' . $location['region'] . ', ' . $location['city'] . ')';

Should be more like this (notice the added ” next to the parentheses)

$keterangan[]= '"(' . $location['country'] . ', ' . $location['region'] . ', ' . $location['city'] . ')"';

so that the Javascript looks like this

var lokasi = ["(IN, , )","(IN, , )","(US, , )","(GB, K2, Oxford)"];