Suggestions: Google Maps

progre55 · 2015-03-10 13:09:09

I have a new project that needs to have Google Maps integrated within the TXP. This is a site where there will be a listing of multiple businesses with each having its own page and within that page a map showing location. The address fields already are in place. In the past, I have used one of the plugins available in the resource center but it no longer functions. The other plugins are also quite old. If anyone has any suggestions it would be greatly appreciated.

progre55

philwareham · 2015-03-10 13:41:13

How about creating a couple of custom fields for latitude and longitude and in article form the JavaScript like so:

<script>
    function initialize() {

        // Map options.
        var mapOptions = {
            center: {
                lat: <txp:custom_field name="latitude" />,
                lng: <txp:custom_field name="longitude" />
            },
            zoom: 12
        };

        // Add a map marker.
        var marker = new google.maps.Marker({
            map: map,
            position: {
                lat: <txp:custom_field name="latitude" />,
                lng: <txp:custom_field name="longitude" />
            },
            animation: google.maps.Animation.DROP, // Animate the pin dropping onto map.
            title: 'Hello from <txp:title />!'
        });

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Completely untested but it’s a start, maybe? More info at Google Maps API.

candyman · 2015-03-10 13:43:13

pro_googlemapv3 by Hilary Quinn

msd_google_map by Matt S. Davis

or, if you can use OpenStreetMap,

tok_osm_leaflet by Torsten.

Last edited by candyman (2015-03-10 13:43:31)

progre55 · 2015-03-10 14:58:32

Thanks for the feedback. I should have included this one thing — are their any that do not use lat./long. coordinates — but the actual address —- since the address is what we have currently in the DB

progre55

philwareham · 2015-03-10 15:00:40

This might help

MattD · 2015-03-10 15:18:07

My maps plugin is outdated, I created a new version that uses the newer google maps API but it’s is bare bones and doesn’t include the address geocoding that was in the original.

Gocom · 2015-03-10 20:25:21

philwareham wrote #288923:

How about creating a couple of custom fields for latitude and longitude and in article form the JavaScript like so.

Instead of adding Textpattern variables to JavaScript (which also creates security issues), it’s better to attach them to the document as HTML attribute values. I.e.

<div data-address="<txp:custom_field name="address" />" data-title="<txp:title />"></div>

And then loop over matching nodes, replacing them with maps:

$('[data-address]').each(function ()
{
  var $this = $(this), geocoder = new google.maps.Geocoder();

  geocoder.geocode(
    {
      address: $this.attr('data-address')
    },
    function (results, status)
    {
      if (status == google.maps.GeocoderStatus.OK)
      {
        var position = results[0].geometry.location;

        google.maps.event.addDomListener(window, 'load', function ()
        {
          var map = new google.maps.Map(
            $this.get(0),
            {
              center: position,
              zoom: 12
            }
          );

          new google.maps.Marker({
            map: map,
            position: position,
            animation: google.maps.Animation.DROP,
            title: $this.attr('data-title')
          });
        });
      }
    }
  );
});

MattD · 2015-03-11 19:58:39

You can also use Google’s Static Maps API of you don’t need interactive maps.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=<txp:rah_function call="urlencode"><txp:custom_field name="address" /></txp:rah_function>&zoom=14&size=400x400" />

But I think you need lat/long to add markers to the map.

Last edited by MattD (2015-03-11 22:01:53)

Textpattern CMS

Textpattern CMS support forum

#1 2015-03-10 13:09:09

Suggestions: Google Maps

#2 2015-03-10 13:41:13

Re: Suggestions: Google Maps

#3 2015-03-10 13:43:13

Re: Suggestions: Google Maps

#4 2015-03-10 14:58:32

Re: Suggestions: Google Maps

#5 2015-03-10 15:00:40

Re: Suggestions: Google Maps

#6 2015-03-10 15:18:07

Re: Suggestions: Google Maps

#7 2015-03-10 20:25:21

Re: Suggestions: Google Maps

philwareham wrote #288923:

#8 2015-03-11 19:58:39

Re: Suggestions: Google Maps

Board footer