I am creating a php page that loads cordinates from a mysql table and use them to create markers on a google map. It works fine. I also added Info Window but the problem is that the content on the info window for all the markers is showing the content meant for the last marker in the table. Below is the code:
<?php
include("php/db.php");
$db = new dbAccess($db_host,$db_user,$db_pass, $db_db, true);
$db->query("select * from tbl_gps;", false);
while($row_gps = $db->fetchrow()){
$gps_list .= "['".$row_gps['gps_title']."', ".$row_gps['lat_dec'].", ".$row_gps['long_dec'].", ".$row_gps['gps_order']."],\n";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Aerial View Of Federal Polytechnic Bauchi</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 17,
center: new google.maps.LatLng(10.256817, 9.771996),
mapTypeId: google.maps.MapTypeId.SATELLITE
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarkers(map, struct);
}
/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var struct = [
<?php echo $gps_list; ?>
];
var markers = new Array();
function setMarkers(map, locations) {
var infowindow = null;
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: location[0],
zIndex: location[3]
});
/* now inside your initialise function */
infowindow = new google.maps.InfoWindow({
content: "holding..."
});
google.maps.event.addListener(marker, 'click', function () {
// where I have added .html to the marker object.
infowindow.setContent(location[0]);
infowindow.open(map, this);
});
}
}
</script>
</head>
<body style="background-color:#000" onload="initialize()">
<div id="map_canvas" style="height:95%; width:100%"></div>
</body>
</html>
Well, your code has the problem with javascript closure. It's the common problem when attaching event listeners in the loop. Try to understand and follow http://code.google.com/apis/maps/documentation/javascript/examples/event-closure.html.
Related
How i show multiple location in google map in Codeigniter. I have one array including latitude and longitude. I want to show all the location in map.
This is my $query array passed from controller to view page,
Array (
[0] => stdClass Object ([lat] => 37.45360256419911 [lng] => -122.16470718383789)
[1] => stdClass Object ([lat] => 37.45455646705577 [lng] => -122.1653938293457)
[2] => stdClass Object ([lat] => 37.451543303913226 [lng] => -122.16745376586914)
)
i want to show all this 3 location in my map,now it's only marking 1 location.
<script>
var map;
var marker;
var infowindow;
var messagewindow;
function initMap() {
<?php
foreach($query as $row){
$lat=$row->lat;
$lng=$row->lng;
?>
var location = {lat: <?php echo $lat; ?>, lng: <?php echo $lng; ?>};
map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 13
});
var marker = new google.maps.Marker({
position: location,
map: map,
});
infowindow = new google.maps.InfoWindow({
content: document.getElementById('form')
});
messagewindow = new google.maps.InfoWindow({
content: document.getElementById('message')
});
google.maps.event.addListener(map, 'click', function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
});
<?php
}
?>
}
It works fine for me...
In controller :
function latLanLocation()
{
if($this->session->userdata('logged_in'))
{
$session_data = $this->session->userdata('logged_in');
$data['title'] = 'Create client';
$ibo = $this->session->userdata['logged_in']['ibo'];
$latLanQuery = $this->db->query('select name,latitude,longitude from distributor_clients where sponsor='.$ibo.' AND status="A" AND latitude !=0 AND longitude !=0');
$userData = $latLanQuery->result_array();
$locations='[';
foreach ($userData as $key => $row) {
$name = $row['name'];
$longitude = $row['longitude'];
$latitude = $row['latitude'];
$locations .= '["'.$name.'","'.$latitude.'","'.$longitude.'"],';
}
$locations .= ']';
$data['markers'] = $locations;
$this->load->view('location', $data);
}
else
{
redirect('login', 'refresh');
}
}
//In View folder create location.php
// Html code for Google Map Javascript API
<!DOCTYPE html>
<html>
<head>
<style>
#mapCanvas {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="mapCanvas"></div>
<script>
function initMap() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
map.setTilt(50);
var markers = <?php echo $markers; ?>
// Add multiple markers to map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Place each marker on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Center the map to fit all markers on the screen
map.fitBounds(bounds);
}
// Set zoom level
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
</body>
</html>
The final output:
Not tested but you could try like this. Put the php code before and generate an array of lat,lng coordinates which you convert to json for use by the initmap function. Iterate through the object members and add a new marker.
<?php
$data=array();
foreach($query as $row){
$lat=$row->lat;
$lng=$row->lng;
$data[]=array('lat'=>$lat,'lng'=>$lng);
}
$json=json_encode( $data );
?>
<script>
var map;
var marker;
var infowindow;
var messagewindow;
<?php
echo "
var json={$json};
var lat={$lat};
var lng={$lng};
"
?>
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: location,
zoom: 13
});
infowindow = new google.maps.InfoWindow({
content: document.getElementById('form')
});
messagewindow = new google.maps.InfoWindow({
content: document.getElementById('message')
});
google.maps.event.addListener( map, 'click', function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
for( var n in json ){
var obj=json[ n ];
lat=obj.lat;
lng=obj.lng;
var location = { lat:lat, lng:lng };
var marker = new google.maps.Marker({
position: location,
map: map,
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
}
</script>
Using the key you provided in the comment I get an error about an invalid key and the map refuses to load at all. Using a different key however worked fine with a couple of alterations.
My db connection is mysqli and the query and processing of recordset may or may not be the same method you chose. You need to edit this according to your needs as those details were ommited from the question.
<?php
/* emulated db connection */
include __DIR__. '/db.php';
/* get markers from a table */
$sql='select `name`,`lat`,`lng` from markers limit 20';
$result=$db->query( $sql );
?>
<!--
Original question:
https://stackoverflow.com/questions/48437784/how-i-show-multiple-location-in-google-map-codeigniter/48438084?noredirect=1#comment83871602_48438084
-->
<?php
/* generate data array & convert to json */
$data=array();
/*
foreach( $query as $row ){
}
*/
while( $row=$result->fetch_object() ){
$lat=$row->lat;
$lng=$row->lng;
$name=$row->name;
$data[]=array('name'=>$name,'lat'=>$lat,'lng'=>$lng);
}
$json=json_encode( $data );
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Google maps - display markers</title>
<script>
var map;
var marker;
var infowindow;
var messagewindow;
<?php
echo "
var json={$json};
var lat={$lat};
var lng={$lng};
"
?>
function initMap() {
var location=new google.maps.LatLng( lat,lng );
map = new google.maps.Map( document.getElementById('map'), {
center: location,
zoom: 13
});
infowindow = new google.maps.InfoWindow({
content: document.getElementById('form')
});
messagewindow = new google.maps.InfoWindow({
content: document.getElementById('message')
});
google.maps.event.addListener( map, 'click', function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
for( var n in json ){
var obj=json[ n ];
lat=obj.lat;
lng=obj.lng;
name=obj.name;
var location = new google.maps.LatLng( lat, lng );
var marker = new google.maps.Marker({
position: location,
title:name,
map: map,
});
google.maps.event.addListener( marker, 'click', function() {
var content=infowindow.getContent();
content.querySelector('input[name="lat"]').value=e.latLng.lat();
content.querySelector('input[name="lng"]').value=e.latLng.lng();
content.querySelector('input[name="name"]').value=this.title;
infowindow.open( map, this );
}.bind( marker )); /* bind to THIS marker */
}
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=<API KEY>&callback=initMap'></script>
<style>
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
</style>
</head>
<body>
<div id='map'></div>
<form id='form'>
<input type='text' name='lat' />
<input type='text' name='lng' />
<input type='submit' />
</form>
<div id='message'>unknown content</div>
</body>
</html>
This code can display multi different markers. Hope this help you.
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(-33.91722, 151.23064),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var features = [
// do looping here and replace LatLng value using foreach PHP.
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'info'
}, {
position: new google.maps.LatLng(-33.91539, 151.22820),
type: 'library'
},
];
// Create markers.
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
source : https://developers.google.com/maps/documentation/javascript/custom-markers
using PHP & MYSQL on WordPress and Google Map API in order to retrieve data from MYSQL database and display markers with info windows on Google Map.
the problem is that i am not able to display inside the infoWindow the retrieved data from the database as the siteID WHERE it is a field in the selected table.
using the below code Markers are not showed on the Map
code :
<?php
/*
Template Name: MAP2
*/
get_header();
?>
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCquey2tCZ32jLJJDEEi2D7_RnXXyj9RTI&callback=initMap">
</script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 600px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map,currentPopup;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(33.888630, 35.495480),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
//icon: icons[feature.type].icon,
map: map
});
var popup = new google.maps.InfoWindow({
// content: feature.position.toString(),
// this line that makes the error
content: feature.info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
var features = [
<?php
global $wpdb;
$prependStr ="";
foreach( $wpdb->get_results("SELECT siteID, latitude, longitude FROM site_coordinates2", OBJECT) as $key => $row) {
$latitude = $row->latitude;
$longitude = $row->longitude;
$info = $row->siteID;
echo $prependStr;
?>
{
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
info:(<?php echo $info;?>),
}
<?php
$prependStr =",";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
</body>
</html>
<?php
get_footer();
?>
Replace round brackets with single quote against info parameter. Thanks.
i am using PHP MYSQL on WordPress with Google Map API where the code retrieve data from the MYSQL database and display markers on the map based on the existing coordinates in the database. also it display a infowindow on click Listener.
the problem is that the infow window doesn't shows any data inside of it.
can anyone one tel me where is the error?
code:
<?php
/*
Template Name: MAP2
*/
get_header();
?>
<!DOCTYPE html>
<html>
<head>
<title>Custom Markers</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=**********&callback=initMap">
</script>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 600px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map,currentPopup;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: new google.maps.LatLng(33.888630, 35.495480),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
//icon: icons[feature.type].icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: feature,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
var features = [
<?php
global $wpdb;
$prependStr ="";
foreach( $wpdb->get_results("SELECT siteID, latitude, longitude FROM site_coordinates2", OBJECT) as $key => $row) {
$latitude = $row->latitude;
$longitude = $row->longitude;
$info = $row->siteID;
echo $prependStr;
?>
{
position: new google.maps.LatLng(<?php echo $latitude; ?>, <?php echo $longitude; ?>),
}
<?php
$prependStr =",";
}
?>
];
for (var i = 0, feature; feature = features[i]; i++) {
addMarker(feature);
}
}
</script>
</body>
</html>
<?php
get_footer();
?>
If I'm reading your code right, you've got an array of features that looks like:
features = [
{position: new google.maps.LatLng(1, 2)},
{position: new google.maps.LatLng(3, 4)},
// etc...
];
i.e. the array contains objects with just a position property. So you correctly refer to that when you do:
position: feature.position,
However when you try and set your infowindow content using:
new google.maps.InfoWindow({
content: feature,
maxWidth: 300
})
That won't work, because the content property is meant to be a string, not a JS object. You need to specify some text there. If you're just wanting to display the coordinates, you could do:
new google.maps.InfoWindow({
content: feature.position.toString(),
maxWidth: 300
})
I am using phonegap and I have a google map which locates the user and places a marker on the map. What I want to do is load markers from a mysql database which holds lat and long details for each place. Do I have to do this through php and ajax? This is the code I have at the moment. Thanks
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
navigator.geolocation.getCurrentPosition(onSuccess, onError,{'enableHighAccuracy':false,'timeout':10000});
}
//GEOLOCATION
var onSuccess = function(position) {
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;
var myLatlng = new google.maps.LatLng(myLat, myLong);
//MAP
var mapOptions = {
center: new google.maps.LatLng(myLat, myLong),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
};
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body onload="onLoad()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Define map
var map;
Initialize map:
function initialize(lat,lng, n) { //BY PASSING LATITUDE (lat), LONGITUDE (lng) AND THE TEXT (n) WILL SET A DEFAULT MARKER
var mapOptions = {
scaleControl: true,
center: new google.maps.LatLng(lat, lng),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
map: map,
position: map.getCenter()
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent('<b>ا'+n+'</b>');
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
call this function in device ready function.
You can pass current lat, long-
var myLat = position.coords.latitude;
var myLong = position.coords.longitude;
call a ajax request and get location data from server.
Insert all latitude and longitude in locations array within your ajax success request and call setMarkers method
var loc_array = new Array(); //LOCATION ARRAY
$.each(server_response_array, function(i,v){
loc_array[i] = [v.lat, v.lng, v.temp_txt];
}
setMarkers(loc_array);
function setMarkers(locations){
//clearMap();
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker, i
for (i = 0; i < locations.length; i++)
{
var loan = locations[i]['txt'];
var lat = locations[i]['lat'];
var lng = locations[i]['lng'];
latlngset = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
map: map, title: loan , position: latlngset, icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' //THIS WILL SET A BLUE COLOR MARKER YOU CAN SET MORE COLOR AND ALSO CAN MANAGE FROM DATABASE
});
//map.setCenter(marker.getPosition())
var content = loan;
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
Also see this link
goole-map-javascript-api-unable-to-load-markers-from-mysql-database
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.
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
}
//....
}