Question

I am trying to create a site that has option to add maps to the site using google maps api. I found hundreds of tutorial and blog posts on embeding map in the site. But what I actually want is a way to give the user choose a place on the map and add marker. Then get the co-ordinates of the marker and store it in the database of retrieving and showing in the front-end. I have seen this option given wordpress plugins like mappress. But now I’m trying to achieve this in codeigniter. I can’t find any thing to start on. Can any one point out some one tell me where to start?

Answer 1

This is really easy the 3rd version of the Google maps API. Versions before that where much more complicated, and most of the tutorials floating around are for those versions. Have a look through the API documentation and examples.

Adding a marker is as simple as:

var marker=new google.maps.Marker({/* ... see API */});

Adding an event (eg click) to a marker is as simple as:

var marker_click=new google.maps.event.addListener(
                       marker,
                       'click',
                       function() {/*...*/});

Sounds like you’d want a click event for the map, which you’d translate into a latlong, then (a) generate a marker on the map with JS, and (b) post that back to your server using AJAX, or by storing the values in a hidden form field to be submitted after.

Update:

Mostly from the API documentation @ http://code.google.com/apis/maps/documentation/javascript/events.html:

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

  map.setCenter(location);

  /*Do your processing here:
   * eg. ajax.post('addMarkerDB&lat='+location.lat+'&long='+location.long);
   */
}

Note: There is no ajax.post function by default, but there could be 🙂