In our example we will use two file types - PHP and XML. Our PHP file will be responsible for saving the user input in XML file and displaying the google map with all saved markers. Our XML file will be basically a place, where we will save all the markers saved by an user. It is worth to mention that you can easily replace the XML file with any kind of a database. If you do so, you will for example have possibility to approve each marker saved on your page. Additionally, if you have some kind of authentication system on your site, you can also save according username of a person who placed a marker on your site and provide some kind of statistics for your users. It's up to you, how you will use this code.

After some initial explanation we can move to our PHP file. Let's start with the header of our file:

1. PHP file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

if (isset($_POST['submit'])) {
  $fh = file_get_contents('markers.xml');
 
  try {
    $xml = new SimpleXMLElement($fh);
  } catch (Exception $e) {
    echo $e->getMessage();
  }
 
  $marker = $xml->addChild('marker');
  $marker->addAttribute('lat', $_POST['lat']);
  $marker->addAttribute('lng', $_POST['lng']);
  $marker->addAttribute('msg', utf8_encode($_POST['msg']));
  $marker->addAttribute('name', utf8_encode($_POST['name']));
  $marker->addAttribute('link', utf8_encode($_POST['link']));
 
  $fp = fopen('markers.xml','w');
  fwrite($fp, $xml->saveXML());
  fclose($fp);
  header('Location:index.php');
}

We use PHP function file_get_contents() to load the content of our XML file. Our XML file would be an empty XML file with markers element, which will be a holder for our markers. We initialize a PHP build in class SimpleXMLElement with our file and catch an exception if any error occur. If our user clicks on a save button (the code of this form will follow) we create a child element with according attributes and then save it as a new XML file.

This way we will add new markers to our XML file without loosing any previous information saved in our XML file. After our file is saved we redirect our user to the index page to prevent reloading of the page and saving multiple markers with the same information. I know it is not the cleanest way to do that, but it is just an example which should serve as a blueprint for your code.

You can notice that I use utf8_encode() function to encode our user input into correct charset. Because I encountered major problems with foreign characters and our final solution should work for standard characters as well as for special characters, that is a necessary step to handle this problem. The only thing you should keep in mind is to set the charset of your site to UTF-8.

Don't forget to put that code before the head section of your PHP file, because otherwise you will get an error that the header were already send.

Let's take a look at our jQuery function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

$(document).ready(function() {
 
  var mark;
  var pointA;
 
  if (GBrowserIsCompatible()) {
    var m = $("#map")[0];
 
    if(m) {
 
      var map = new GMap2(m);
      var start = new GLatLng(63.13450320833446,16.69921875);
      var zoomLevel = 5;
      map.setCenter(start, zoomLevel);
      map.addControl(new GSmallMapControl());
 
      $.get('markers.xml',function(data) {
        $(data).find('marker').each(function(){
          var lat    = $(this).attr('lat');
          var lng    = $(this).attr('lng');
          var html   = $(this).attr('name')+" ";
          html      += $(this).attr('msg')+" ";
          html      += $(this).attr('link');
          var point  = new GLatLng(lat,lng);
          var marker = new GMarker(point);
 
          map.addOverlay(marker);
 
          GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(html);
          });
 
        });
 
      });
 
      GEvent.addListener(map, 'click', function(overlay, point){
        if(mark) {
          map.removeOverlay(mark);
        }
        if(point) {
          pointA = new GPoint(point.x, point.y);
          mark = new GMarker(pointA);
          map.addOverlay(mark);
          map.getCenter(point);
          var lat = point.y;
          var lng = point.x;
          var form = "
          <form action="\"index.php\"" method="\"post\"">" +
          "<input name="\"lat\"" type="\"hidden\"" value="\""+lat+"\"" />"+
          "<input name="\"lng\"" type="\"hidden\"" value="\""+lng+"\"" />"+
          "Name:
          <input name="\"name\"" type="\"text\"" value="\"\"" />"+
          "Msg:
          <input name="\"msg\"" type="\"text\"" value="\"\"" />"+
          "Link:
          <input name="\"link\"" type="\"text\"" value="\"\"" />"+
          "<input name="\"submit\"" type="\"submit\"" value="\"save\"" />"+
          "</form>";
          map.openInfoWindowHtml(point,form);
        }
      });
    }
  }
});

In the first part we declare two variables pointA and mark which will later serve to retrieve the longitude and latitude of our marker. We will also reduce the ability of a user to place several markers at the same time.

We check if our browser is compatible with google maps and we look for a place holder for our map. If both of the conditions are fulfilled we display our map and use AJAX request to display all the markers saved in our XML file. We also add an event listener which is triggered every time a user clicks on an existing marker. If it is a case, we display an info cloud with information saved by the user.

In the second part of our function we add another event listener, which is triggered every time a user places a new marker. In our info cloud we will display a form which I mentioned before and save the longitude and latitude in hidden fields. After our user clicks a save button the information from the form will be processed by our PHP file which will create another marker and display it on our google map.

The last part is our XML file:

2. XML file:

1
2
3
4

<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker lat="64.4348920430406" lng="15.205078125" msg="Msg" name="Name" link="yes!"/>
</markers>

As I said before this example is just a blueprint and should be extended by user input validation. As I also said before, you don't really need to use XML file and you can also implement an approval system of each marker placed on your site. You will have to save your information in a database though. You can use my post about displaying a simple navigation to get the idea, how to create an XML file based on information you retrieve from database. I hope this will be helpful. I'm waiting for your feedback.