Login

pankajdurve · 03-14-2015, 12:11 PM

hOW TO DISPLAY LOCATION ON GOOLE MAP USING CODIGNATER?

ivantcholakov · 03-14-2015, 02:08 PM

There is a library https://github.com/BIOSTALL/CodeIgniter-...PI-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.

pankajdurve · 03-14-2015, 09:52 PM

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>

ivantcholakov · 03-15-2015, 01:19 AM

@pankajdurve

Your code looks as finished as an idea, you simply have to debug it.

Code:
$(document).ready(function() { ... }

This is deprecated by jQuery as far as I know. Change it with

Code:
$(function() { ... });

Code:
bord_data = JSON.parse(data);

It is unclear why JSON parsing call is needed. If code is exactly as it has been posted, the browser alone does this parsing.
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/starte...le-maps-v3
https://github.com/ivantcholakov/starter...cripts.php

ivantcholakov · 03-15-2015, 05:47 AM

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;

    }

ivantcholakov · 03-15-2015, 06:54 AM

https://github.com/ivantcholakov/starter...adfcdb19cf