Integrating a GoogleMap into an article?

[micxer]

I already did this, even with the whole command and it looked exactly like it should do. Any other idea, what happens?

[garvinhicking]

Hi!

So if you alert() the value before you pass it to the google command, the alert output is perfectly fine?

Regards,
Garvin

[micxer]

The following s9y-code

Code: Select all

function load() {ldelim}
  if (GBrowserIsCompatible()) {ldelim}
    var valstring = "{$entry.properties.ep_googlemapvals}";
    var vals = valstring.split(",");
    var map = new GMap2(document.getElementById("map{$entry.id}"));
    alert('map.setCenter(new GLatLng('+vals[0]+', '+vals[1]+'), '+vals[2]+');');
    map.setCenter(new GLatLng(vals[0], vals[1]), vals[2]);
    {$entry.properties.ep_googlemappoints}
  {rdelim}
{rdelim}

results in this HTML/JS-Code

Code: Select all

var valstring = "60.18122,24.88403,15";
var vals = valstring.split(",");
var map = new GMap2(document.getElementById("map14"));
alert('map.setCenter(new GLatLng('+vals[0]+', '+vals[1]+'), '+vals[2]+');');
map.setCenter(new GLatLng(vals[0], vals[1]), vals[2]);

and the alert shows the following

Code: Select all

map.setCenter(new GLatLng(60.18122, 24.88403), 15);

Looks perfect to me. I can't imagine, what can cause the problem.

[garvinhicking]

Hi!

It might be because the vals come from a string that their content is interpreted as a string instead of a float number.

Maybe this would work:

Code: Select all

map.setCenter(new GLatLng("'" + vals[0] + "'", "'" + vals[1] + "'"), "'" + vals[2] + "'");

(Or the use of floatval() ?)

HTH,
Garvin

[micxer]

Thanks for the hint. I managed to solve the problem. If anyone wants to try it, here is the code:

Code: Select all

<div class="serendipity_entry_body">
              {$entry.body}
              {if $entry.properties.ep_googlemapvals and $entry.properties.ep_googlemappoints and $entry.properties.ep_googlemapwidth and $entry.properties.ep_googlemapheight}
                <div id="map{$entry.id}" style="width: {$entry.properties.ep_googlemapwidth}; height: {$entry.properties.ep_googlemapheight};"></div>
                <script type="text/javascript">
                    //<![CDATA[
                      function load() {ldelim}
                        if (GBrowserIsCompatible()) {ldelim}
                          var valstring = "{$entry.properties.ep_googlemapvals}";
                          var vals = valstring.split(",");
                          var map = new GMap2(document.getElementById("map{$entry.id}"));
                          map.setCenter(new GLatLng(parseFloat(vals[0]), parseFloat(vals[1])), parseFloat(vals[2]));
                          {$entry.properties.ep_googlemappoints}
                        {rdelim}
                      {rdelim}
                    //]]>
                </script>
              {/if}
              {if $entry.properties.ep_belowgooglemap}
                {$entry.properties.ep_belowgooglemap}
              {/if}
            </div>

$entry.properties.ep_googlemapvals - the initial position and zoom level
$entry.properties.ep_googlemappoints - the points in JavaSript-Format ( map.addOverlay(...); )
$entry.properties.ep_googlemapwidth - the widht of the map
$entry.properties.ep_googlemapheight - the height of the map
$entry.properties.ep_belowgooglemap - some text that is shown below the map since the normal text will appear above

[comdoxx]

Hi Folx,

I wanted to integrate my Tracks recorded with my GPS into a Google Map which shall be included in a blog entry. Therefore, I found this thread, which - thanks to Garvin - helped me a lot.

I extended the code in entries.tpl as follows:

Code: Select all

            <div class="serendipity_entry_body">
                {$entry.body} //######FOLLOWING IS NEW ####
                 {if $entry.properties.ep_googlemap}
<div id="map{$entry.id}" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
    //<![CDATA[
      if (GBrowserIsCompatible()) {ldelim}
				gmap = new GMap2(document.getElementById("map{$entry.id}")); // create map
				_mSvgEnabled = true; _mSvgForced = true;
				gmap.addControl(new GLargeMapControl());
				gmap.setCenter(new GLatLng(0,0),0,G_HYBRID_MAP);
				gmap.addControl(new GScaleControl());
				gmap.addControl(new GMapTypeControl());
				// track 1 segment 1:
				pts1_1 = new Array();

GDownloadUrl("{$entry.properties.ep_googlemap}", function(data, responseCode) {ldelim}
  var xml = GXml.parse(data);
  var markers = xml.documentElement.getElementsByTagName("trkpt");
  var bounds= new GLatLngBounds();
  for (var i = 0; i < markers.length; i++) {ldelim}
    pts1_1.push(new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lon"))));
    bounds.extend(pts1_1[i]);
  {rdelim}
  gmap.setZoom(gmap.getBoundsZoomLevel(bounds));
  gmap.setCenter(bounds.getCenter());
  gmap.addOverlay(new GPolyline(pts1_1,"#E600E6",3,0.8));
{rdelim});
				

      {rdelim}
    //]]>
</script>
{/if}
//######PREVIOUS IS NEW#######
</div>

This allows to pass a "*.gpx" file as the "custom field variable" (Note: Always pass a fully qulified URL as "/uploads/mytrack.gpx").

The gpx-files are formed among http://www.topografix.com/GPX/1/1/ and uses the file's trackpoints declared by "trkpt". Beware: The code above does NOT split several tracks but draws them all in one line!

If someone would like to extend the code to additionally display waypoints, to split several tracks and display them in different colors, to add markers with given Timestamps and or elevation, to ... - just feel free to do so.

This code above fits my needs, so - at the moment - I won't extend it