Reputation: 73
i try to make multiple markers on googlemaps and taking data from database. this is my code
<script>
<?php
$query = $db->query('SELECT * FROM tbl_kabkot WHERE 1=1 AND latitude !=0 AND longitude !=0');
while($row = $query->fetch()){
$nama_kabkot = $row[nama_kabkot];
$longitude = $row[longitude];
$latitude = $row[latitude];
?>
var markers = [
[<?= $nama_kabkotv ?>, <?= $latitude ?>, <?= $longitude ?>]
];
<?php } ?>
function initMap() {
var latlng = new google.maps.LatLng(-33.92, 151.25);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("peta"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
But this code only shows one value from the database. how can i show a multiple markers with database?
Upvotes: 1
Views: 16439
Reputation: 33823
The initial sql query has a redundant where
clause due to 1=1
but I assume that is for testing. The markers
variable in the original code is being over-written on each iteration through the loop so the array will only have one item.
<?php
/* lat/lng data will be added to this array */
$locations=array();
$query = $db->query('SELECT * FROM tbl_kabkot WHERE 1=1 AND latitude !=0 AND longitude !=0');
while( $row = $query->fetch() ){
$nama_kabkot = $row['nama_kabkot'];
$longitude = $row['longitude'];
$latitude = $row['latitude'];
/* Each row is added as a new array */
$locations[]=array( 'name'=>$nama_kabkot, 'lat'=>$latitudem, 'lng'=>$longitude );
}
/* Convert data to json */
$markers = json_encode( $locations );
?>
<script type='text/javascript'>
<?php
echo "var markers=$markers;\n";
?>
function initMap() {
var latlng = new google.maps.LatLng(-33.92, 151.25);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("peta"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, lat, lng;
var json=JSON.parse( markers );
for( var o in json ){
lat = json[ o ].lat;
lng=json[ o ].lng;
name=json[ o ].name;
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
name:name,
map: map
});
google.maps.event.addListener( marker, 'click', function(e){
infowindow.setContent( this.name );
infowindow.open( map, this );
}.bind( marker ) );
}
}
</script>
Upvotes: 3
Reputation: 20
<script>
// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
function initMap() {
var markerscenter = [
['Bondi Beach', -33.890542, 151.274856,],
['Bondi Beach2', -33.90542, 151.2748,]
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 10,
center: {lat:Number(markerscenter[0][0]), lng:Number(markerscenter[0][1])}
});
setMarkers(map);
}
// 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 markers = [
['Bondi Beach', -33.890542, 151.274856,],
['Bondi Beach2', -33.90542, 151.2748,]
];
// Info Window Content
var infoWindowContent = [
'desc1','desc2'
];
function setMarkers(map) {
var image = 'markeimage.png';
var infoWindow = new google.maps.InfoWindow(), marker, i;
for (var i = 0; i < markers.length; i++) {
//var beach = beaches[i];
var marker = new google.maps.Marker({
position: {lat:Number(markers[i][0]), lng: Number(markers[i][1])},
map: map,
icon: image,
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
}
}
</script>
Upvotes: -1