SofaSurfer.org

Tweet After making my previous post on how to simply store comments in a jSon file (and the comment from Brian) I decided to write an additional HOWTO create dynamic markers and store them in a jSon file. It also includes an automatic geo data lockup via Google GeoCoder and generates a detail html file for-each marker created, which then will be loaded dynamic when the marker is clicked. Check out the working example or download the code. So lets get started with the code. First we need to add jQuery and the Google map API: The HTML code is very basic and contains a Title, Input field for new markers and the placeholder for the map. Make sure to add "loadMap()" to the html body. Dynamic Google Map markers via jSon So lets have a look at the JavaScript, first we set some global variables like data path zoom level etc: // data file with markers (could also be a PHP file for dynamic markers) var newDate = new Date; var markerFile = 'markers.json?time=' + newDate.getTime(); // set default map properties var defaultLatlng = new google.maps.LatLng(49.00,10.00); // zoom level of the map var defaultZoom = 2; // variable for map var map; // variable for marker info window var infowindow // List with all marker to check if exist var markerList = {}; // set error handler for jQuery AJAX requests $.ajaxSetup({"error":function(XMLHttpRequest,textStatus, errorThrown) { alert(textStatus); alert(errorThrown); alert(XMLHttpRequest.responseText); }}); // option for google map object var myOptions = { zoom: defaultZoom, center: defaultLatlng, mapTypeId: google.maps.MapTypeId.HYBRID } On page load loadMap is fired which which loads the google map to the myMap DIV, and then fires loadMarkers: /** * Load Map */ function loadMap(){ // create new map make sure a DIV with id myMap exist on page map = new google.maps.Map(document.getElementById("myMap"), myOptions); // create new info window for marker detail pop-up infowindow = new google.maps.InfoWindow(); // load markers loadMarkers(); } Now we need the markers, loadMarkers loads the existing markers via ajax request directly from the data.json fiel (could of course also be a dynamic PHP files which generates jSon). /** * Load markers via ajax request from server */ function loadMarkers(){ // load marker jSon data $.getJSON(markerFile, function(data) { // loop all the markers $.each(data.markers, function(i,item){ // add marker to map loadMarker(item); }); }); } Once the markers are loaded they somehow have to go on the map: /** * Load marker to map */ function loadMarker(markerData){ // create new marker location var myLatlng = new google.maps.LatLng(markerData['lat'],markerData['long']); // create new marker var marker = new google.maps.Marker({ id: markerData['id'], map: map, title: markerData['name'] , position: myLatlng }); // add marker to list used later to get content and additional marker information markerList[marker.id] = marker; // add event listener when marker is clicked // currently the marker data contain a dataurl field this can of course be done different google.maps.event.addListener(marker, 'click', function() { // show marker when clicked showMarker(marker.id); }); // add event when marker window is closed to reset map location google.maps.event.addListener(infowindow,'closeclick', function() { map.setCenter(defaultLatlng); map.setZoom(defaultZoom); }); } Each marker has an onclick event which loads the detail marker html file into a google infowindow. /** * Show marker info window */ function showMarker(markerId){ // get marker information from marker list var marker = markerList[markerId]; // check if marker was found if( marker ){ // get marker detail information from server $.get( 'data/' + marker.id + '.html' , function(data) { // show marker window infowindow.setContent(data); infowindow.open(map,marker); }); }else{ alert('Error marker not found: ' + markerId); } } Here the logic for lockup new markers and post them via AJAX jSon request to the server. /** * Adds new marker to list */ function newMarker(){ // get new city name var markerAddress = $('#newMarker').val(); // create new geocoder for dynamic map lookup var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': markerAddress}, function(results, status) { // check response status if (status == google.maps.GeocoderStatus.OK) { // Fire Google Goal _gaq.push(['_trackPageview', '/tracking/marker-submit']); // set new maker id via timestamp var newDate = new Date; var markerId = newDate.getTime(); // get name of creator var markerCreator = prompt("Please enter your name",""); // create new marker data object var markerData = { 'id': markerId, 'lat': results[0].geometry.location.lat(), 'long': results[0].geometry.location.lng(), 'creator': markerCreator, 'name': markerAddress, }; // save new marker request to server $.ajax({ type: 'POST', url: "data.php", data: { marker: markerData }, dataType: 'json', async: false, success: function(result){ // add marker to map loadMarker(result); // show marker detail showMarker(result['id']); } }); }else if( status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT){ alert("Marker not found:" + status); } }); } The PHP code to save the marker is pretty much the same as in my previous post, and returns the newly create marker data: /* get markes from file */ $dataPath = '/var/www/gmap/data/'; $markerDataFile = 'markers.json'; $markerText = file_get_contents($markerDataFile); /* create array list from markers */ $markerList = json_decode($markerText,true); /* check if new marker is posted */ if( !empty($_POST['marker']) ){ /* get new marker data */ $markerData = $_POST['marker']; /* add additional marker information */ $markerData['ip'] = $_SERVER['REMOTE_ADDR']; $markerData['created'] = time(); /* create detail marker content file */ $markerContent = "" . $markerData['creator'] . "-> " . $markerData['name'] . ""; $markerContent .= "" . date("D M j G:i:s T Y") . ""; /* save marker file to server */ $markerFile = $dataPath . $markerData['id'] . ".html"; file_put_contents($markerFile , $markerContent); /* add new marker to existing list */ $markerList['markers'][] = $markerData; /* convert comments to string */ $markerText = json_encode($markerList); /* save comment to file */ file_put_contents($markerDataFile, $markerText); /* return newly created marker */ echo json_encode($markerData); }else{ echo "Invalid request"; } This should give a good start on how to dynamically add and display markers via Google map. Check out the working example or download the code.

• Tags
  #Wikileaks distributioncorporate.ru dyslectic e-commerce EC2 ExtJS freedom of speech Google Maps API V3 happycode HowTo jQuery jSon Julian Assange Kim Hill MODX mootools NGINX OperationPayback PHP Projects Redmine Simple spelling sphider UBUNTU Widgets wordpress
• Categories
  • DasBlog (4)
  • FunnyStuff (3)
  • HappyCode (5)
  • Mobile (1)
  • MODX (3)
  • Projects (10)
  • Server (2)
  • Virus (3)
  • WebStuff (19)
  • WordPress (2)
• Comments
  • Getting Started With Amazon EC2 on UBUNTU EC2: Add new admin user
  • Moshe Beeri on UBUNTU EC2: Add new admin user
  • Brian on Dynamic google map markers via simple jSon file
  • sofasurfer on Dynamic google map markers via simple jSon file
  • Brian Miller on Dynamic google map markers via simple jSon file
• Archives
  • February 2012
  • January 2012
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • April 2011
  • March 2011
  • December 2010
  • April 2010
  • January 2010
  • December 2007
  • October 2007
  • September 2007
  • July 2007
  • June 2007
  • May 2007
  • April 2007
  • March 2007
  • February 2007
  • September 2006
  • August 2006
  • May 2006
  • January 2006
  • December 2005
  • November 2005
  • July 2005
  • December 2004
  • August 2004
  • February 2004
• Tweets

  • RT @swissmiss: .@WilsonMiner's @buildconf talk on why we build things is fantastic. If you create digital tools, watch this talk: http:/ ... 2 days ago

  • @Denainbkk @travelhappy @KevinRevolinski have a look at this it's a friend of mine: http://t.co/UcSXjdyE 3 days ago

  • RT @EverFlyMsQ: Fly Peeps: Kim Hill...Deejay kill him (@killhim ) http://t.co/w6TgJUvy 1 week ago

  • Tomáš Sedlá?ek: Warum die Ökonomie ein kulturelles Phänomen ist http://t.co/Pa8mpGw3 2 weeks ago

  • Just moved #MODX, #WP and #Redmine to a #EC2 m1.micro AIM running #NGINX server, so far all nice: http://t.co/WKMKhNSt 2 weeks ago

  • only4ears: http://t.co/7JlVAYcZ 2 weeks ago

  • GO Lao: http://t.co/Iq30xgOW! 2 weeks ago

  • what brothers do: http://t.co/Pr9K3tYq 2 weeks ago

  • If you look @ instant coffee as a hassle, it's a sign :) 2 weeks ago

  • #deluxe makes time: http://t.co/l9lrJ2cu 2 weeks ago

• Blogroll
  • Kilian – Privat
  • The MODX Blog
  • UBUNTU -Planet
• Meta
  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
• Donation
  sofasurfer.org
  
  Thank You - $5Made my Day - $15
  
  Other Amount: