+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Using CodeIgniter (https://forum.codeigniter.com/forumdisplay.php?fid=5)
+--- Forum: General Help (https://forum.codeigniter.com/forumdisplay.php?fid=24)
+--- Thread: Google map integration with CI (/showthread.php?tid=1495)
Google map integration with CI - pankajdurve - 03-14-2015
hOW TO DISPLAY LOCATION ON GOOLE MAP USING CODIGNATER?
RE: Google map integration with CI - ivantcholakov - 03-14-2015
There is a library https://github.com/BIOSTALL/CodeIgniter-Google-Maps-V3-API-Library but unfortunately I did not find license information there.
You can use JavaScript directly with some knowledge about the Google Maps API version 3.
RE: Google map integration with CI - pankajdurve - 03-14-2015
But my program is running properly. i send json array to function.but if i want to pass php array
to this program.how can do it? i made json array as bold style
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#marker-tooltip {
display: none;
position:absolute;
width: 300px;
height: 200px;
background-color: #ccc;
margin: 15px;
}
</style>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA7IZt-36CgqSGDFK8pChUdQXFyKIhpMBY&sensor=true" type="text/javascript"></script>
<script type="text/javascript">
var map;
var geocoder;
var marker;
var bord_data = new Array();
var latlng;
var infowindow;
$(document).ready(function() {
ViewCustInGoogleMap();
});
function ViewCustInGoogleMap() {
var mapOptions = {
center: new google.maps.LatLng(18.9894117, 73.1175052), // Coimbatore = (11.0168445, 76.9558321)
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// data in json format
var data = '[{ "DisplayText": "PANVEL 4:30 AM", "ADDRESS": "PANVEL", "LatitudeLongitude": " 18.9894117,73.1175052", "MarkerId": "Customer" },{ "DisplayText": "KHARGHAR 5:00 AM", "ADDRESS": "KHARGHAR", "LatitudeLongitude": "19.0361,73.0617", "MarkerId": "Customer"},{ "DisplayText": "CBD BELAPUR", "ADDRESS": "CBD BELAPUR 5:15 AM", "LatitudeLongitude": "19.0169,73.0394", "MarkerId": "Customer"},{ "DisplayText": "VASHI 5:30 AM", "ADDRESS": "VASHI", "LatitudeLongitude": "19.005198400000000000,73.0100", "MarkerId": "Customer"},{ "DisplayText": "KHANDA COLONY 4:55AM", "ADDRESS": "KHANDA COLONY", "LatitudeLongitude": " 19.005198400000000000 ,73.112831299999930000", "MarkerId": "Customer"}]';
bord_data = JSON.parse(data);
for (var i = 0; i < bord_data.length; i++) {
setMarker(bord_data[i]);
}
}
function setMarker(bord_data ) {
geocoder = new google.maps.Geocoder();
infowindow = new google.maps.InfoWindow();
if ((bord_data ["LatitudeLongitude"] == null) || (bord_data ["LatitudeLongitude"] == 'null') || (bord_data ["LatitudeLongitude"] == '')) {
geocoder.geocode({ 'address': bord_data ["Address"] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: false,
html: bord_data ["DisplayText"],
// icon: "images/marker/" + bord_data ["MarkerId"] + ".png"
});
google.maps.event.addListener(marker, 'mouseover', function(event) {
infowindow.setContent("<b>"+this.html+"</br>");
infowindow.setPosition(event.latLng);
infowindow.open(map, this);
});
}
else {
alert("error");
}
});
}
else {
var latlngStr = bord_data ["LatitudeLongitude"].split(",");
var lat = parseFloat(latlngStr[0]);
var lng = parseFloat(latlngStr[1]);
latlng = new google.maps.LatLng(lat, lng);
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: false, // cant drag it
html: bord_data ["DisplayText"] // Content display on marker click
//icon: "images/marker.png" // Give ur own image
});
//marker.setPosition(latlng);
//map.setCenter(latlng);
google.maps.event.addListener(marker, 'mouseover', function(event) {
infowindow.setContent("<h3>"+this.html+"</h3>");
infowindow.setPosition(event.latLng);
infowindow.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function(event) {
infowindow.setContent("<h3>"+this.html+"</h3>");
//infowindow.setPosition(event.latLng);
infowindow.close(map, this);
});
}
}
</script>
</head>
<body>
<table>
<tr>
<td>aaa</td>
<td> <div id="map-canvas" style="width: 500px; height: 500px; align:center"></div></td>
</tr>
</table>
</body>
</html>
RE: Google map integration with CI - ivantcholakov - 03-15-2015
@pankajdurve
Your code looks as finished as an idea, you simply have to debug it.
Code:
$(document).ready(function() { ... }Code:
$(function() { ... });Code:
bord_data = JSON.parse(data);Edit: It is needed, but I am not sure what do you do about escaping data. If I had the data on the server side I would write something like this:
Code:
bord_data = <?php echo json_encode($data); ?>;Try to make code to run first without the info window, add the code for info window when showing the map and the marker is ok.
See how this example works, make a comparison:
http://ivantcholakov.entrydns.org/starter-public-edition-4/www/playground/google-maps-v3
https://github.com/ivantcholakov/starter-public-edition-4/blob/master/platform/applications/site_example/modules/playground/views/google_maps_v3_scripts.php
RE: Google map integration with CI - ivantcholakov - 03-15-2015
And here is the most simple example I can have, a helper function that simply shows a map, without further interaction:
Code:
/**
* @author Ivan Tcholakov <[email protected]>, 2015
* @license The MIT License, http://opensource.org/licenses/MIT
*/
function gmap($latitude, $longitude, $zoom = null, $element_id = null) {
$latitude = (string) $latitude;
$longitude = (string) $longitude;
if ($latitude == '' || $longitude == '') {
return;
}
$zoom = (int) $zoom;
if ($zoom <= 0) {
$zoom = 6;
}
$element_id = (string) $element_id;
if ($element_id == '') {
$element_id = 'map_canvas';
}
$prefix = $element_id.'_';
ob_start();
?><div id="<?php echo $element_id; ?>" class="google-maps"></div>
<script type="text/javascript">
//<![CDATA[
if (typeof google == 'undefined' || typeof google.maps == 'undefined' ) {
document.write('<script type="text/javascript" src="<?php echo is_https() ? 'https:' : 'http:'; ?>//maps.google.com/maps/api/js?sensor=false">\x3C/script>');
}
$(function () {
var <?php echo $prefix; ?>latitude = <?php echo json_encode($latitude); ?>;
var <?php echo $prefix; ?>longitude = <?php echo json_encode($longitude); ?>;
var <?php echo $prefix; ?>zoom = <?php echo json_encode($zoom); ?>;
var <?php echo $prefix; ?>position = new google.maps.LatLng(<?php echo $prefix; ?>latitude, <?php echo $prefix; ?>longitude);
var <?php echo $prefix; ?>options = {
center: <?php echo $prefix; ?>position,
zoom: <?php echo $prefix; ?>zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var <?php echo $prefix; ?>map = new google.maps.Map(document.getElementById('<?php echo $element_id; ?>'), <?php echo $prefix; ?>options);
var <?php echo $prefix; ?>map_marker = new google.maps.Marker({map: <?php echo $prefix; ?>map, position: <?php echo $prefix; ?>position});
});
//]]>
</script>
<?php
$result = ob_get_contents();
ob_end_clean();
return $result;
}RE: Google map integration with CI - ivantcholakov - 03-15-2015
https://github.com/ivantcholakov/starter-public-edition-4/commit/e15687a78d16165bf3b01a2902c5ffadfcdb19cf