GoogleMap and WordPress: problems in creating markers dynamically

4 Views

I would like to create markers dinamycally on a GoogleMap in WordPress. The markers are computed from the post tags (which are all locations). I have no problem in computing coordinates, and creating a php array. The problem comes when I have to plot the dynamically generated data stored in the array on the map, because no pointers are displayed

I specified the following instructions in WP header.php:

Read More
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=mykey" type="text/javascript"></script>

  <script src="<?php bloginfo('template_directory'); ?>/mapLocations_cache.php" type="text/javascript"></script> 
  <script src="<?php bloginfo('template_directory'); ?>/map_functions.js" type="text/javascript"></script>

The dynamically created array (that I save in mapLocations_cache.php) has the following format: 

   var markers = [
   {
  'latitude': 62.3908358,
  'longitude': 17.3069157,
  'title': 'it happens in Sundsvall',
  'news': 'che noia5'
   },
   ];

The map_functions.js contains the following code: 

   var centerLatitude = 62.3908358;
   var centerLongitude = 17.3069157;
   var startZoom = 4;

   var map;

   function addMarker(latitude, longitude, description) {
   var marker = new GMarker(new GLatLng(latitude, longitude));

    GEvent.addListener(marker, 'click',
     function() {
        marker.openInfoWindowHtml(description);
     }
   );

   map.addOverlay(marker);
   }

   function init() {
   if (GBrowserIsCompatible()) {    
    map = new GMap2(document.getElementById("map")); 
    map.addControl(new GSmallMapControl());
    map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);

    for(id in markers) {
        addMarker(markers[id].latitude, markers[id].longitude, markers[id].title);


    }
    }
    }

    window.onload = init;
    window.onunload = GUnload;

Since when I use a file/array that is NOT dynamically generated, this code works well, my suspicion is that the JavaScript included in the header is not completed appropriate when I try to harvest data dynamically from WordPress posts and tags.

Any suggestion would help 🙁

Cheers

Marina

Post Views: 4

Related posts

Leave a Reply

4 comments

  2. Here are some suggestions:

    1. Be sure that there is no ‘,’ after the last element in markers array (as it is in your code now).
    2. Prefer for (id = 0; id < markers.length; ++id) {...} to iterate over an array.
    3. Be sure that you get proper numbers in function addMarker(lat, lng, ..). You can also force casting to numbers by: var marker = new GMarker(new GLatLng(lat-0, lng-0));.
    4. Display and check the source of the page in the browser using ‘Show source’ or similar.
    5. Download the complete page source to your local computer and check it.
    6. Use a Javascript debugger (e.g. Firebug) to debug your code.

  3. Use the Google Geocoding API to pass in the location itself rather then coding long and lat with another script. Google API plays well with city names, country names, and postal codes, and is fairly bulletproof even if the formatting isn’t perfect.

  4. Eureka! I did find the solution to my error. Instead of specifying the Javacript code that takes care of the pointers and GoogleMaps in the header, I moved it to the bottom of the index.php. This means that the map data will be processed only when my Geocoder has finished its job and the pointer list/array is complete!

    The interaction between PhP and Javascript was not completely clear to me 🙂

    Marina