jesse.t

It is not, but regardless of what you set the variable to, it doesn’t affect the popup. I didn’t dig too deep in the code, but I’d imagine that the map was created with no way to get the marker/infowindow object. If you’re familiar with Google Maps api you can probably write something up using it’s event listener and the ‘domready’ to show the infowindow. But that’ll probably require some serious tweaking to the plugin. I’d start by looking at the gMap function that is called by the plugin.

.themeblvd-gmap img{ max-width:none !important; }

fixes the issue with the popup/zoom.

I think this issue mainly effects anyone using responsive themes or themes where the parent object has a fluid width.

For anyone having issues with the zoom bar/popup artifacts. It turns out that there is no css to control the image width so it goes with the parents width. If you’re using a responsive theme, it’s set to 100%, and that breaks it. Simply add .themeblvd-gmap img{ max-width:none !important; } to your css and it’ll fix the issue.

DvdVlag, That’s what my changes accomplish. There are 5 files, 2 (core.php and the javascript from the plugin), 2 I added (my javascript file and mapPage.php) and changes I added to function.php (I need to pull them out, but they are fine for now.) After that all you have to do is create a new page change its type to mapPage.php All of this should be posted throughout these 3x posts.

https://capsoftinc.com/dev/esmm/wordpress/ is the dev page where Ive worked on this. You will have to go to Columbia, SC though to see the filterable results. Again, this is merely a test page. So it looks like crap and could have several bugs.

Ian, I haven’t worked on this project in a while, but when I get back around to it, I’ll definitely take a look at merging it with the new RC.

Have you set any categories up in the plugin? The categories are what create the nav. Also, check to make sure you have the latest jquery. That may cause some conflicts as well. Preventing the divs from being created.

Check to make sure you have a div with the id filteredNav. That is the one that creates the navigation. It is created in the javascript here:

if ($('#map').length) {
		$('#map').append("<div id='filteredNav' /><hr /><div id='mapLocs' style='padding-left:30px;' />");
		$.each($.bgmp.markers, function(index, arr) {
			$('#filteredNav').append('<button class="fNav shown" value='+$.bgmp.markers[index]+''+'>'+$.bgmp.markers[index]+'</button>');
		});
	}

https://pastebin.com/jtQVv4uh

This is my mapPage.php. I use it to display the map. I may have forgotten something along the lines of my creating this. I guess run a compare and see if that fixes your issues. I have a feeling it has something to do with me stuffing everything in that map div.

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.

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

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.

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 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.

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.

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. ??

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

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.