Google Maps API v3 (PHP & Javascript)

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

Your code is little bit weird. You have count($split_data) times included 'google maps library', closed tag </style> , created map , initialized function initialize . Why? Are you sure that count($split_data)>=20 ? Have you dumped it? Why don't separate php-part and js-part? You could get all places to be displayed on the map using ajax, or you could even from needed array of obects(each object could contain lat , lng , name , etc) in php. Then make $j_array=json_encode($array) in php-part to convert it to string and var places=<?php echo $j_array; ?>; var places=<?php echo $j_array; ?>; in js-part to make object again. And than you are to work with array of objects in js. It is much easier and obviously. Refactor your code. It is messed.

I hope it will be helpfull. Sorry for messed english, I treid to be clear.

Answer 2

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>