Filter Placemarks Revisited

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.

https://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

That’s great to hear man ??
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 ??

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: https://www.ads-software.com/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.

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

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

Updated:

https://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. ??

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.

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.

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.

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.

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.

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.

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>

https://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:

https://pastebin.com/6kZSqq2h

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.

I can’t get that div that shows the categories to me..
I’m I doing something wrong?