<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var locations = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
Impementasi :
#Controller:
public function index()
{
$data ['wisata']=$this->db->get('wisata');
$data ['hiburan']=$this->db->get('hiburan');
$data ['tm']=$this->db->get('tempat_makan');
$data ['penginapan']=$this->db->get('penginapan');
$data ['layanan']=$this->db->get('layanan');
$this->load->view('user/home',$data);
}
<style type='text/css'>
#peta {
width: 100%;
height: 500px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyB0SZKfq2Ja2xn9XNkeApth9kHjwOimjlE&callback=initMap"></script>
<script type="text/javascript">
(function() {
window.onload = function() {
//Parameter Google maps
var options = {
zoom: 9, //level zoom
//posisi tengah peta
center: new google.maps.LatLng(-6.4429147,106.048433),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Buat peta di
var map = new google.maps.Map(document.getElementById('peta'), options);
//maps tempat wisata
<?php
$a=1;
$gab="[";
foreach($wisata -> result() as $a){
$link=base_url('index/detail_info/wisata/'.$a->id_wisata);
$telp=$a->telepon;
if(strlen($telp<1)){$telp="-";}
$lok=$a->nama_tempat_wisata." - ".$a->alamat." Telp:".$telp;
$gab.= "['".$lok."',". $a->latitude.",".$a->longitude.",'".$link."'],";
}
$gab.="]";
$gab=str_replace("],]","]]",$gab);
?>
var locations =<?php echo $gab;?>
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,icon: 'images/icon1.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]+"<br><a href='"+locations[i][3]+"'>Info Detail</a>");
infowindow.open(map, marker);
}
})(marker, i));
}//for i
<?php
$gab="[";
foreach($hiburan -> result() as $a){
$link=base_url('index/detail_info/hiburan/'.$a->id_hiburan);
$telp=$a->telepon;
if(strlen($telp<1)){$telp="-";}
$lok=$a->nama_hiburan." - ".$a->alamat." Telp:".$telp;
$gab.= "['".$lok."',". $a->latitude.",".$a->longitude.",'".$link."'],";
}
$gab.="]";
$gab=str_replace("],]","]]",$gab);
?>
locations =<?php echo $gab;?>
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,icon: 'images/icon2.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]+"<br><a href='"+locations[i][3]+"'>Info Detail</a>");
infowindow.open(map, marker);
}
})(marker, i));
}
<?php
$gab="[";
foreach($tm -> result() as $a){
$link=base_url('index/detail_info/makan/'.$a->id_tempat_makan);
$telp=$a->telepon;
if(strlen($telp<1)){$telp="-";}
$lok=$a->nama_tempat_makan." - ".$a->alamat." Telp:".$telp;
$gab.= "['".$lok."',". $a->latitude.",".$a->longitude.",'".$link."'],";
}
$gab.="]";
$gab=str_replace("],]","]]",$gab);
?>
locations =<?php echo $gab;?>
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,icon: 'images/icon3.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]+"<br><a href='"+locations[i][3]+"'>Info Detail</a>");
infowindow.open(map, marker);
}
})(marker, i));
}
<?php
$gab="[";
foreach($penginapan -> result() as $a){
$link=base_url('index/detail_info/penginapan/'.$a->id_penginapan);
$telp=$a->telepon;
if(strlen($telp<1)){$telp="-";}
$lok=$a->nama_penginapan." - ".$a->alamat." Telp:".$telp;
$gab.= "['".$lok."',". $a->latitude.",".$a->longitude.",'".$link."'],";
}
$gab.="]";
$gab=str_replace("],]","]]",$gab);
?>
locations =<?php echo $gab;?>
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,icon: 'images/icon4.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]+"<br><a href='"+locations[i][3]+"'>Info Detail</a>");
infowindow.open(map, marker);
}
})(marker, i));
}
<?php
$gab="[";
foreach($penginapan -> result() as $a){
$link=base_url('index/detail_info/penginapan/'.$a->id_penginapan);
$telp=$a->telepon;
if(strlen($telp<1)){$telp="-";}
$lok=$a->nama_penginapan." - ".$a->alamat." Telp:".$telp;
$gab.= "['".$lok."',". $a->latitude.",".$a->longitude.",'".$link."'],";
}
$gab.="]";
$gab=str_replace("],]","]]",$gab);
?>
locations =<?php echo $gab;?>
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,icon: 'images/icon5.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]+"<br><a href='"+locations[i][3]+"'>Info Detail</a>");
infowindow.open(map, marker);
}
})(marker, i));
}
<?php
$gab="[";
foreach($layanan -> result() as $a){
$link=base_url('index/detail_info/layanan/'.$a->id_layanan);
$telp=$a->telepon;
if(strlen($telp<1)){$telp="-";}
$lok=$a->nama_tempat_layanan." - ".$a->alamat." Telp:".$telp;
$gab.= "['".$lok."',". $a->latitude.",".$a->longitude.",'".$link."'],";
}
$gab.="]";
$gab=str_replace("],]","]]",$gab);
?>
locations =<?php echo $gab;?>
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,icon: 'images/icon5.png'
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]+"<br><a href='"+locations[i][3]+"'>Info Detail</a>");
infowindow.open(map, marker);
}
})(marker, i));
}
//batas akhir
};
})();
</script>
hasilnya:
saat di klik detail:
Tidak ada komentar:
Posting Komentar