Tenho um código aonde ele pega a longitude e a latitude do local onde você está e coloca em um mapa. Preciso fazer com que nesse mapa apareça todas os latitudes e longitudes do banco de dados com marcadores em cada um desses pontos. Meu código está em Codeigniter e uso o banco Mysql, mas ainda não consegui fazer a ligação com o banco, a única coisa que tenho é na parte da View.
<div class="col-sm-12">
<div id="map_canvas" style="height: 400px;" class="google_maps"></div>
</div>
<script type="application/javascript">
$(document).ready(function() {
var colorful_style = [{
"featureType": "landscape",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"color": "#d3d3d3"
}, {
"visibility": "on"
}]
}, {
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "landscape",
"stylers": [{
"visibility": "on"
}, {
"color": "#b1bc39"
}]
}, {
"featureType": "landscape.man_made",
"stylers": [{
"visibility": "on"
}, {
"color": "#ebad02"
}]
}, {
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#416d9f"
}]
}, {
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#000000"
}]
}, {
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "off"
}, {
"color": "#ffffff"
}]
}, {
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#000000"
}]
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [{
"visibility": "on"
}, {
"color": "#ffffff"
}]
}, {
"featureType": "road",
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "water",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [{
"color": "#ebad02"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"color": "#8ca83c"
}]
}];
/*
* Google Maps Initialize
*/
function initialize() {
colorfulStyleMap = new google.maps.StyledMapType(colorful_style, {name: "Colorful"});
function generateMap() {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Você esta aqui!'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
var mapOptions = {
zoom: 11
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
map.mapTypes.set('colorful_style', colorfulStyleMap);
map.setMapTypeId('colorful_style');
}
generateMap();
}
$(window).bind('gMapsLoaded', initialize);
window.loadGoogleMaps();
});
</script>