Question

I would like to display multiple markers (up to 20 at least) on the Google maps via Javascript. The data which comes in an array is in PHP.

Upon running the code, the Google map only plots the last co-ordinates in the array. Can you guys enlighten me why? Following are the codes (Sorry if this is albeit messy as i’m a novice. thanks for any help in advance):

$link ="http://network-tools.com/default.asp?prog=trace&host="."$ip_address";
$link_traceroute ="http://api.ipinfodb.com/v3/ip-city/?key=a15e8640c34837e4d402df55d7fd5e059e50d0d407d285a7a3b2ccbf85e1a234&ip=";

$response = file_get_contents("$link", false, $context);

$pieces_traceroute = strchr ($response, "$ip_address is from");
$split_pieces_traceroute = str_replace("Trace","$$$",$pieces_traceroute);
$better_pieces_traceroute =(explode("$$$",$split_pieces_traceroute));

$raw_data = strip_tags($better_pieces_traceroute[1]);
$split_data = (explode(" ",$raw_data));

for ($i=0; $i<count($split_data);$i++)
{

$checker= valid_ip($split_data[$i]);

    if ($checker != null){
    $response_traceroute = file_get_contents("$link_traceroute"."$split_data[$i]", false, $context);
    $pieces_traceroute = (explode(";",$response_traceroute));
    $Cord1 = $pieces_traceroute[8];
    $Cord2 = $pieces_traceroute[9];
    echo $Cord1.nl2br("\n");
    echo $Cord2.nl2br("\n");
    ?>

    </style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var myLatlng = new google.maps.LatLng(<?php echo $Cord1;?>, <?php echo $Cord2;?>);
     var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  }
 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

 var marker = new google.maps.Marker({
      position: myLatlng,
      title:"Hello World!"
  });

  // To add the marker to the map, call setMap();
  marker.setMap(map); 
  }

Answer 1

You doesn’t need to loop the full js part (including <script> initialize). You get only the last value because of that. Try something like this instead…

// Assume we have $locations variable which hold array data
<script>
function initialize() {
    var centerMap = <?php echo json_encode($locations[0]) ?>;
    var locations = <?php echo json_encode($locations) ?>;
    var centerLatlng = new google.maps.LatLng(centerMap[0], centerMap[1]);
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        zoom: 4,
        center: centerLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
    }
}
</script>