Tagged: 

Viewing 7 reply threads
  • Author
    Posts
    • March 23, 2016 at 12:59 pm #6161
      4michaelcoleman
      Member

      Is there anything out their for Piklist to show Google Maps on a page. What I would like to do is add an address, and then have Google Maps show on a post with the location marker set.

      Or do I need to do this manually by having the user add the map value in a separate field. Was trying to make this easier for the end user.

    • March 23, 2016 at 2:42 pm #6164
      Steve
      Keymaster

      Piklist doesn’t have a Map output template, but you can easily create it:

      <?php $yourAddress = '350 5th Ave, New York, NY';?>

<iframe width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?q=<?php echo esc_attr($yourAddress); ?>&output=embed"></iframe>
    • March 23, 2016 at 3:30 pm #6165
      tiberiur
      Member

      Maybe this helps: https://piklist.com/support/topic/google-map/

    • March 23, 2016 at 7:22 pm #6169
      4michaelcoleman
      Member

      Steve trying to keep this responsive for mobile views. So really don’t want to use an iFrame. Tiberiur didn’t seem like the solution there really worked, but thank anyway. If anyone has any great ideas I am all ears.

    • March 23, 2016 at 9:56 pm #6170
      Steve
      Keymaster

      Try adding this css:

      iframe {
  max-width: 100%;
}
    • March 25, 2016 at 2:11 am #6192
      4michaelcoleman
      Member

      Steve –

      It seems your solution is the best thing I’ve found so far. Going to try some plugins. Just need to be able to hold the aspect ratio within the iFrame.

    • March 30, 2016 at 5:42 pm #6211
      4michaelcoleman
      Member

      So what I ended up doing was setting fields for the Latitude and Longitude in my event information. Then applied them to my map using the Google Map API.

      Field Values

      array(
    'type' => 'text',
    'field' => 'google_map_latitude',
    'label' => 'Latitude',
    'required' => true,
    'columns' => 6,
),
array(
    'type' => 'text',
    'field' => 'google_map_longitude',
    'label' => 'Longitude',
    'required' => true,
    'columns' => 6,
),

      Map Output

      var summitMap;
function initMap() {
var mapCenter = new google.maps.LatLng(<?php echo $post['google_map_latitude']; ?>, <?php echo $post['google_map_longitude']; ?>);
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
summitMap = new google.maps.Map(document.getElementById('summit-map'), {
    scrollwheel: false,
    center: {lat: <?php echo $post['google_map_latitude']; ?>, lng: <?php echo $post['google_map_longitude']; ?>},
    disableDefaultUI: true,
    zoom: 16,
    draggable: false,
    zoomControl: false,
    streetViewControl: false,
    mapTypeControl: false,
    mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
});

      It completely works in all views even mobile.

    • March 30, 2016 at 9:58 pm #6216
      Steve
      Keymaster

      Beautiful!

  • Author
    Posts
Viewing 7 reply threads
  • The topic ‘Google Maps Solution’ is closed to new replies.