Home/ Questions/Q 7679637
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T17:55:26+00:00

All right, I’ll try to explain my problem as clearly as I can. I

  • 0

All right, I’ll try to explain my problem as clearly as I can. I already tried a lot of possible solution but never happen to find the right one.
I also want to say this is a tutorial for me, i am just a beginner in combining JS, PHP and GMAPv3 APIs.
I hope that someone can help me in solving this.
That being said, here is my code with a few lines to explain what i want to do.

The problem involves 3 main files.

1) process.php (this file generates an array of coordinates)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>MyTest</title>
    <link rel="stylesheet" type="text/css" href="css/content.css" />
    <script type="text/JavaScript" src="js/gmapinit.js"></script>
</head>
<body>
    <?php
    ...after some lines of code i build this...
    $myarray = ...;
    ...and here i move to the second file
    echo "<input type=\"button\" value=\"Next!\" onClick=\"location.href='map.html'\">";
    ?>
</body>

2) map.html (this file is responsible for drawing the map on the screen)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>MyTest</title>
    <link rel=stylesheet type="text/css" href="css/googlemap.css" />
    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCbNM4y2fJ4AdCoXcWW-sGXPl5nXaJogPA&sensor=false">
    </script>
    <script type="text/JavaScript" src="js/gmapinit.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
</head>
<body onLoad="init_map_and_markers()">
    <div id="map_canvas">
    </div>       
</body>

2) gmapinit.js (the javascript file that builds the map and “should” get the array as parameter to draw markers accordingly)

function init_map_and_markers() {
var global_markers = [];

var infowindow = new google.maps.InfoWindow({});
var latlng = new google.maps.LatLng(27.059126, -41.044922);
var myOptions = {
    zoom: 3,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

//Of course here myarray is not defined but the point is making it available here so i can loop through it and place my markers!

for (var i = 0; i < markers.length; i++) {
    for(var count = myarray.length - 1; count >= 0; --count) { 
        var o = myarray[count];
        var lat = parseFloat(o.lat);
        var lng = parseFloat(o.lng);
        var markerdata = o.user;

        var myLatlng = new google.maps.LatLng(lat, lng);

        var contentString = "<html><body><div><p><h2>" + markerdata + "</h2></p></div></body></html>";

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: "Coordinates: " + lat + " , " + lng + " | Marker Data: " + markerdata
        });

        marker['infowindow'] = contentString;

        global_markers[i] = marker;

        google.maps.event.addListener(global_markers[i], 'click', function() {
            infowindow.setContent(this['infowindow']);
            infowindow.open(map, this);
        });
    }    
}

}

So the main question is, how can i pass $myarray from process.php to map.html making it available to gmapinit.js???

I am asking this avoiding to write down all code-tests i did because maybe my all thinking is wrong…that’s why i am writing down the most “clean” code i got.

Code possible solutions would be much appreciated, and don’t hesitate to ask for details if i missed something.

Thanks a lot.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you may use the markers as argument for init_map_and_markers()

    <body onLoad="init_map_and_markers(<?php echo json_encode($phpArrayMarkersDefinition); ?>)">

    ..then you may access this array inside the function: 

    function init_map_and_markers(markers) 
{
  //....
  for(var i=0;i<markers.length;++i)
  {
    //create the markers here
  }

  //....
}
    • 0