Adding dynamic markers from php controller
I am using google map API and want to create markers dynamically. I am using Zend Framework and this is part of my code.
Who can help me get this object to get the markers and then show them on the map?
<script>
function initMap() {
var locations[];
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var map = new google.maps.Map(document.getElementById('ressearch'), {
zoom: 15,
center: {lat: 36.8454481, lng: 10.1995665}
});
var markers = <?php echo json_encode( $all_users_loc ); ?>;
//console.info(markers);
// Create an array of alphabetical characters used to label the markers.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
for(var i=0;i<2;i++){
location[i]=markers
}
var locations = [
{lat: <?=$this->translate($all_users_loc[0][co_latitude])?>, lng: <?=$this->translate($all_users_loc[0][co_longitude])?>},
{lat: 36.84573142925444, lng: 10.19872965563718},
{lat: 36.84630667456557, lng: 10.199920556439793}
]
// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given "locations" array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length],
icon: image,
animation: google.maps.Animation.DROP,
});
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
google.maps.event.addDomListener(window, "load", initMap);
</script>
<?php echo json_encode( $all_users_loc ); ?>
<?=$this->translate($all_users_loc[0][co_latitude])?>
<div id="ressearch"></div>
//this is the result
[{"co_adresse":"adresse 1","co_longitude":"10.19959870","co_latitude":"36.84540516"},{"co_adresse":"adresse","co_longitude":"33.58555244","co_latitude":"10.33333330"}] 36.84540516
+3
source to share
1 answer
Try the following:
<?php
$json = '[{
"co_adresse": "adresse 1",
"co_longitude": "10.19959870",
"co_latitude": "36.84540516"
}, {
"co_adresse": "adresse",
"co_longitude": "33.58555244",
"co_latitude": "10.33333330"
}]';
$all_users_loc = json_decode($json, true);
$arrary = [];
foreach($all_users_loc as $key) {
$arrary[] = array(($key['co_latitude']*1), ($key['co_longitude']*1));
}
?>
<script>
function markersOnMap() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap'
};
// Display a map on the web page
map = new google.maps.Map(document.getElementById("ressearch"), mapOptions);
map.setTilt(50);
// Multiple markers location, latitude, and longitude
var markers = <?php echo json_encode($array) ;?>;
/* var markers = [
[40.671531, -73.963588],
[40.672587, -73.968146],
[40.665588, -73.965336]
];
*/
// Info window content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>Brooklyn Museum</h3>' +
'<p>The Brooklyn Museum is an art museum located in the New York City borough of Brooklyn.</p>' + '</div>'],
['<div class="info_content">' +
'<h3>Brooklyn Public Library</h3>' +
'<p>The Brooklyn Public Library (BPL) is the public library system of the borough of Brooklyn, in New York City.</p>' +
'</div>'],
['<div class="info_content">' +
'<h3>Prospect Park Zoo</h3>' +
'<p>The Prospect Park Zoo is a 12-acre (4.9 ha) zoo located off Flatbush Avenue on the eastern side of Prospect Park, Brooklyn, New York City.</p>' +
'</div>']
];
// 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][0], markers[i][1]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0]
});
// Add info window to marker
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// 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', markersOnMap);
</script>
0
source to share