WordPress.org

Forums

Basic Google Maps Placemarks
Filter Placemarks Revisited (80 posts)

  1. jesse.t
    Member
    Posted 2 years ago #

    Ian,
    I want to start off by saying awesome job. I'm really liking this plugin. Having said that, I wanted to revisit a post you made here: http://wordpress.org/support/topic/plugin-basic-google-maps-placemarks-filter-placemarks?replies=3.

    I thought the markers were an overlay and could easily be hidden using jQuery. However, upon testing, it seems that the markers are a little more complicated than that. Is there a way to target a marker after it's been created? When you create a new google.maps.Marker there's no class or anything defined to differentiate the markers. Is that functionality that could be easily added? I was thinking it would be pretty easy to link them to their category since that's how they are being shown/notshown already.

    If that is not the case then my next question is as follows: You mentioned using PHP to hide the classes. PHP itself is server side and wouldn't be able to do this on the fly like javascript would. Could you think of a way that we could use AJAX to reload the map with new category options for the setBGMPMapShortcodeArguments filter?

    http://wordpress.org/extend/plugins/basic-google-maps-placemarks/

  2. jesse.t
    Member
    Posted 2 years ago #

    I hit a snag using Jquery to reload the plugin. Basically, it gets stuck saying loading map and never loads.

    The code: http://pastebin.com/gc5VxRhR

    The javascript is the last item in the pastebin. Ive included the search form and the functions.php to make sure both are acting accordingly.

    The div does reload, as the post data does echo properly. It's just that the map never reloads. You can see this for yourself here: http://tinyurl.com/cgqtujp.

  3. Ian Dunn
    Member
    Plugin Author

    Posted 2 years ago #

    If you download the 1.9.3 release candidate, there's a new bgmp.markers array in functions.js that you might be able to use to access the markers after they've been created.

  4. jesse.t
    Member
    Posted 2 years ago #

    Ian,

    I apologize for the delay in responding. I am downloading the new RC now and will see if what comes of this. Thanks for your fast reply and I'm sorry I didn't afford you the same courtesy.

  5. jesse.t
    Member
    Posted 2 years ago #

    Ian,

    You'll have to forgive my ignorance with Javascript, but how do I access bgmp.markers when it is contained inside the function bgmp_wrapper?

  6. jesse.t
    Member
    Posted 2 years ago #

    To expand, I thought that since you call the function using the jQuery selector, I could access it using jQuery( or $(bgmp.markers), but alas, as I expected, it's local and not global.

  7. Ian Dunn
    Member
    Plugin Author

    Posted 2 years ago #

    Yeah, I think you're right; the way it's setup now, bgmp is a local variable. I'll see if I can change that for the next RC.

    In the mean time, you may want to experiment with making it globalish, by attaching it to jQuery.

    Something like

    $.bgmp =
    {
        init : function()
        {
        }
    }

    Or just

    bgmp = ...

    ... since leaving off the "var" will make it global.

  8. jesse.t
    Member
    Posted 2 years ago #

    So to update on progress: removing the var did indeed set bgmp as a global variable. Playing around with the code a little bit I was able to get the items to hide properly when clicking a button: http://pastebin.com/cZNZFuAh.

    It's very basic at the moment. The next step on my list is to push each marker into it's own array based on the categories assigned via your plugin.

    It'd be a lot easier if you brought the categories over to the javascript already :\. Oh well hopefully in the next few days I can have something for you. Once Ive completed this, would you like to look over the code and possibly implement it into your plugin? It's obviously quite a huge feature

  9. Ian Dunn
    Member
    Plugin Author

    Posted 2 years ago #

    I've added the category info to bgmpData and attached bgmp to the jQuery object, so you should be able to access it as $.bgmp.markers.

    It's pushed to trunk if you want to do your work against it. I'd love to see your final code once it's done.

  10. jesse.t
    Member
    Posted 2 years ago #

    excellent. I'm downloading it now. I'll let you know what I have soon.

  11. jesse.t
    Member
    Posted 2 years ago #

    I am able to pull in categories just fine. So now to build my list!

  12. jesse.t
    Member
    Posted 2 years ago #

    Push Markers into Category Based Arrays:

    http://pastebin.com/QXhHyhvW

    Working on another project, so I won't get to have a full show/hide going on based on categories. However, I am able to successfully hide by category. setVisible(true) didn't work as I expected it to, so I'll have to look at that tomorrow. The next step after that is to create a div and form with checkboxes to select/deselect categories. From what I can tell so far, the best way to support multiple categories and still be able to show/hide will be to hide all categories and then show only the ones checked off. Let me know if you can think of a better way of doing this.

  13. DvdVlag
    Member
    Posted 2 years ago #

    Hey,

    Thanks for showing me this.
    I see you almost got this all done, that's really nice man :)
    I hope you are able to have it done somewhere before february :)

  14. jesse.t
    Member
    Posted 2 years ago #

    I've run into a little snag.... it's when I create the array. If I do:

    for (var s in categories) {
       title = categories[s]['name'];
       if (!$.bgmp.markers.[title]){
          $.bgmp.markers.[title] = [];
       }
    }
    $.bgmp.markers[title].push(marker);

    The markers work, hide/unhide with hardcoded javascript. However, when I do a bgmp.markers.length, it returns a 0. So I changed the code to

    for (var s in categories) {
       title = categories[s]['name'];
       if (!$.bgmp.markers.contains(title)){
          $.bgmp.markers.push(title);
       }
    }
    $.bgmp.markers[title].push(marker);

    the length is returned properly (3 for now), but the markers no longer work. My assumption is push does not function the same was as setting a key/value pair.

    The reason I am having this issue is because I am trying to create sample checkboxes from the key values of the bgmp.markers array, which is returning 0 on the first and $.bgmp.markers[title] is ignored in the second. Why is there such a difference between creating the array values that way?

  15. jesse.t
    Member
    Posted 2 years ago #

    can't edit... Oh well, obviously $.bgmp.markers.title.push(value) shouldn't work, correct? I would imagine it would try and push into an array called title. But then again, a lot of stuff I would expect to work, doesn't because of how funky javascript is..

  16. jesse.t
    Member
    Posted 2 years ago #

    btw, bug in the code, the last } should be after the push.

  17. jesse.t
    Member
    Posted 2 years ago #

    Break through. Decided to sleep on it, and while this code is not pretty by any means. It works.

    I still don't understand why push is treated differently than = new Array()/[], but I decided not to dwell on that. There is no backend functionality, ie if you wanted to turn nav on/off, you would have to add that feature in, etc.

    http://pastebin.com/fKjz49ZW

    The custom Javascript attached to the bottom is how I control the show/hide buttons.

    My next task is to add directions to the map. Though I'm not even remotely sure where to begin... lol

  18. DvdVlag
    Member
    Posted 2 years ago #

    That's great to hear man :D
    Which of the 2 am I supposed to copy into my own functions.js?
    Because on your pastebin I see 2 codes hahaha :)

    and can you explain me a bit what you did?

    Keep up the good work man :)

  19. jesse.t
    Member
    Posted 2 years ago #

    I would warn against using this on a live site as it is probably full of bugs that I have yet to find, but first:

    download the developmental version from: http://wordpress.org/extend/plugins/basic-google-maps-placemarks/developers/. This has the ability to pull in categories, which is required for my code to work.

    The open rename the original functions.js and create a new one, paste the code between
    /************ FUNCTIONS.JS ************************/
    /*************************************************/

    and

    /************CUSTOM JAVASCRIPT************************/
    /****************************************************/

    into the new functions.js.

    The code below custom javascript should go into it's own file, which you would need to enqueue, yourself. For testing purposes, I just added it to header.php in my theme, but that is not the proper way to add javascript into wordpress.

    Inside functions.js I modified:

    // Override default width/heights from settings
    $( '#bgmp_map-canvas' ).css( 'width', '100%'); //bgmpData.options.mapWidth );   
    
    // @todo use $.bgmp.canvas intead of hardcoding it?
    $( '#bgmp_map-canvas' ).css( 'height', '100%'); //bgmpData.options.mapHeight );    Making map responsive.
    // @todo this prevents users from using their own stylesheet?

    I need the map to be responsive. This is also developmental, so I would recommend removing the 100%'s and uncommenting out the original code for now.

    also, this code is delivered as is, bla bla blabla always backup before using, bla bla bla. You know the usual stuff that is suppose to protect me from myself.

    As an aside:

    Ian,

    What would be required in order for me to be able to make the map searchable without reloading the page? Just like the markers have the code for isVisible(), does the map have the ability to push addresses through javascript? The reason I'm asking is I want to display all the available markers (preferably only the ones immediately visible on the map), and when someone clicks on it, the map centers on the marker and fires the event for the popup window.

  20. jesse.t
    Member
    Posted 2 years ago #

    The answer is, yes you can:

    $.bgmp.map.setCenter(new google.maps.LatLng(26.004254, -80.19633499999998));.

    I'll update my code when I have it spitting out the markers

  21. Ian Dunn
    Member
    Plugin Author

    Posted 2 years ago #

    That's awesome Jesse, thanks for sharing your work. It'll definitely help if/when I work on bringing it into the core release.

  22. jesse.t
    Member
    Posted 2 years ago #

    Updated:

    http://pastebin.com/R4nbRPP0

    This creates markers based on the markers visible in your view.
    I have also added a search that allows you to search the map from within the area. The form is hard coded for the time being as I'm busy working on other things. When you create your custom map page, just add the following form:

    <form action="" id="mapSearchForm" method="get">
    <label class="assistive-text" for="q">Search</label>
    <input type="text" placeholder="Search" id="q" name="q" class="field">
    <input type="submit" value="Search" id="searchsubmit" name="submit" class="submit">
    </form>

    and it should search your map without reloading the page.

    When you click on a marker in the outside Div, it will automatically center on the div and set the zoom to 15.

    When you Zoom out, the system will check to see if any new markers are in the viewing area, if so, it will add them to the list.

    A couple of items:

    • There are almost 0 efficiencies and checks implemented. Definitely not to be used in a live environment as I cannot promise that it will work as intended.
    • I haven't found a way to pull all visible markers on load. Unfortunately, $.bgmp.map.getBounds() requires some sort of event to fire. When I have a solution for that I will upload it.
    • I'm not sure how many lookups you are allowed in an hour, so this is definitely not good for a high traffic site as I am using googles GeoCoder to convert address in search.

    Ian,

    Is there any chance you can pull in the non geocoded address in the data for the markers? I know Google allows custom data in their markers. Id like to provide more information on the marker in my details below the map. I tried looking into the code to see what would be required, but there's a disconnect for me between core.php and functions.js. I'm not familiar with wordpress plugins, and the filters so I'm hoping you'd be happy to oblige. :)

  23. jesse.t
    Member
    Posted 2 years ago #

    this creates markers based on the markers visible in your view.

    When I say that, what I mean is I have created a div below the map which will store all the local markers. With proper CSS you could push this to the side or do whatever you would like with it.

  24. jesse.t
    Member
    Posted 2 years ago #

    If you want to, in functions.css line 235 in the Google Listener,

    google.maps.event.addListener( marker, 'click', function()

    Ive added

    $.bgmp.map.panTo(marker.getPosition());
    $.bgmp.map.setZoom(15);

    below

    $.bgmp.previousInfoWindow = infowindow;

    Basically, it just centers the map on the marker and moves the zoom to 15 (You can tweak it to what you need.

  25. Ian Dunn
    Member
    Plugin Author

    Posted 2 years ago #

    The bgmpData.markers array has the longitude/latitude for each marker that was included in the shortcode. Is that what you're looking for?

    In core.php, the mapShortcode() method is what outputs the marker data to the template. It includes views/shortcode-bgmp-map.php, which outputs the bgmpData object, which contains a markers array. The markers array is the result from the getMapPlacemarks() function in core.php.

    Functions.js reads the bgmpData.markers array and turns them into Google Maps marker objects.

  26. jesse.t
    Member
    Posted 2 years ago #

    Ian,

    I need the actual street address. The system we are implementing will have uniform street addresses and I'd like to be able to pull the address that the user inputs.

    As an aside, implementing directions is unbelievably simple. Though I need to do some work with it at the moment.

  27. jesse.t
    Member
    Posted 2 years ago #

    If you could just tell me where to look to include them, I could do it myself. I'm unable to find it in core.php.

  28. Ian Dunn
    Member
    Plugin Author

    Posted 2 years ago #

    the getMapPlacemarks() method is where all the info is added to bgmpData.markers. You'll see the latitude and longitude fields there, and you can add the address field as well.

    I'll add a filter in the next release where you can modify the placemarks before they get returned.

  29. jesse.t
    Member
    Posted 2 years ago #

    ok, got it working. If anyone is interested, Im attaching my code again.

    search form:

    <form action="" id="mapSearchForm" method="get">
    <label class="assistive-text" for="q">Search</label>
    <input type="text" placeholder="Search" id="q" name="q" class="field">
    <input type="submit" value="Search" id="searchsubmit" name="submit" class="submit">
    </form>

    directions:

    <div class="directions">
    <form action="" id="directionsForm" method="get">
    <input type="text" placeholder="start" id="start" name="start" class="field">
    <input type="text" placeholder="end" id="end" name="end" class="field">
    <input type="submit" value="go" id="getDirections" name="submit" class="submit">
    </form>
    </div>

    http://pastebin.com/n60VidcW

    Basically I added google maps and fixed a few issues in display. Allow me to remind you that this code is probably very buggy and definitely will need some sorting to look good. This has been more of a POC. I will eventually clean it up over the next week or 2, but I have to wait on my designer before I even try. There is plenty of room for improvement code wise.

    I had to tweak core.php as well, which can be found here:

    http://pastebin.com/6kZSqq2h

  30. jesse.t
    Member
    Posted 2 years ago #

    You also need to add in <div id="directionsPanel"></div> to display directions. These are hardcoded for the moment because I found it wouldn't display the results in the div when I created it via the append feature.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.