• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Google map integration with CI

#1
hOW TO DISPLAY LOCATION ON GOOLE MAP USING CODIGNATER?
Reply

#2
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.
Reply

#3
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>
Reply

#4
@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
Reply

#5
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;
    }
Reply

#6
https://github.com/ivantcholakov/starter...adfcdb19cf
Reply


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.