Google Maps Map Engine Not Working, Open Maps Working

New home Forums Basic Version Troubleshooting Google Maps Map Engine Not Working, Open Maps Working

This topic contains 64 replies, has 3 voices, and was last updated by  cwilliams 13 hours, 6 minutes ago.

Viewing 15 posts - 1 through 15 (of 65 total)
  • Author
    Posts
  • #49511

    cwilliams
    Member

    I’ve read the How to Setup Your API post and have followed the steps. When I set the Map Engine to Google Maps nothing displays and I get no API error in the Console (https://jmp.sh/pNe1dZQ). When I switch to Open Maps Map Engine the map loads and shows the three test pins, but they don’t do anything when clicked. (https://jmp.sh/XHUKog7). When viewing inspector with Google Maps Map Engine you can see code, but nothing on the screen (https://jmp.sh/doO6Fyl).

    I bought the full lifetime version and I have tried using the chat, but nobody responds, nor has anyone responded by entering my email in the chat window.

    Hoping someone can assist.

    • This topic was modified 5 months ago by  cwilliams.
    #49515

    SupportTeam
    Moderator

    Hi there,

    Thank you so much for getting in touch with us.

    This is because you have the height for the map set at 100%, using % can cause issues where the map has a height of 0 if the element it’s in doesn’t have a height explicitly set.

    Please try changing the height to px in the map editor and see if this solves the issue.

    Thanks so much,

    Kind Regards,
    Trevor Anderson

    #49516

    cwilliams
    Member

    Trevor, thanks for the prompt reply. I’m glad that was such a simple fix. I do have some other questions that aren’t necessarily issues but are things I’d like to discuss with you or someone on your team to see if your product is the best fit for my needs. How can I do that? Does anyone actually respond on the chat?

    #49533

    SupportTeam
    Moderator

    Hi there,

    I’d be more than happy to answer any questions you may have here.

    Thanks so much,

    Kind Regards,
    Trevor Anderson

    #49535

    cwilliams
    Member
    This reply has been marked as private.
    #49538

    SupportTeam
    Moderator

    Hi there,

    Please see this documentation on importing/exporting: https://www.wpgmaps.com/documentation/exporting-and-importing-your-markers/

    There you will find example JSON and CSV files, you may wish to switch over to the CSV format which can be easier for markers. You can also import directly from a Google Sheet URL by entering in the CSV content in the spreadsheet.

    You may be interested in our Store Locator functionality which will allow the user to select their current location when searching and it will display the distance in the infowindow. You can try this out in the Store Locator tab in the map editor.

    For the total count, this could be achieved through some custom JavaScript code if you’d be interested in that I could post something here for you.

    Thanks so much,

    Kind Regards,
    Trevor Anderson

    #49546

    cwilliams
    Member
    This reply has been marked as private.
    #49571

    cwilliams
    Member
    This reply has been marked as private.
    #49671

    cwilliams
    Member

    Hi Trevor,

    I’m getting concerned at the length of time it’s taken for you to respond being that I’m on a trail and trying to make some key decisions if this is the right solution.

    #49674

    SupportTeam
    Moderator

    Hi there,

    Sorry for the issue.

    For searching, it will only show the markers within the radius of the search location, so even though you are searching a zip code, if the radius isn’t large enough to cover the entire area it may not show all markers in that zip code. The same for the title search, the markers would need to be within the radius of the location to show up.

    Here’s the JavaScript to show the total markers above the map, you can paste this is Maps -> Settings -> Advanced in the Custom JS field:

    jQuery(function($){
    $('.wpgmza_map').on('wpgooglemaps_loaded', function() {
    var mid = parseInt($(this).attr('data-map-id'));
    if($('#wpgmaptotal'+mid).length < 1){
    $('#wpgmza_map_'+mid).before('<div id="wpgmaptotal'+mid+'" style="width:100%;text-align:center;">'+Object.keys(wpgmaps_localize_marker_data[mid]).length+'</div>');
    }
    });
    });

    To change the distance to a tenth I will ask our lead developer about this, for now you would need to add the following JavaScript to Maps -> Settings -> Advanced in the Custom JS field:

    jQuery(function($){
    WPGMZA.ProInfoWindow.prototype.legacyCreateDefaultInfoWindow = function(map)
    	{
    		var marker = this.mapObject;
    		var map = marker.map;
    		
    		function empty(field)
    		{
    			return !(field && field.length && field.length > 0);
    		}
    		
    		var container = $("<div class='wpgmza_markerbox scrollFix'></div>");
    		
    		if(this.maxWidth)
    			container.css({"max-width": this.maxWidth});
    		
    		if(!empty(marker.pic))
    		{
    			var img = $("<img/>");
    			
    			img.addClass("wpgmza_infowindow_image");
    			img.attr("src", marker.pic);
    			img.css({"float": "right"});
    			
    			if(this.maxWidth)
    				img.css({"max-width": this.maxWidth});
    			
    			if(this.enableImageResizing && this.imageWidth)
    			{
    				img.css({"width": this.imageWidth});
    				img.css({"height": this.imageHeight});
    			}
    			
    			if(!this.enableImageResizing)
    				img.css({"margin": "5px"});
    			
    			container.append(img);
    		}
    		
    		if(!empty(marker.title))
    		{
    			var p = $("<p class='wpgmza_infowindow_title'></p>");
    			
    			p.text(marker.title);
    			
    			container.append(p);
    		}
    		
    		if(!empty(marker.address) && this.showAddress)
    		{
    			var p = $("<p class='wpgmza_infowindow_address'></p>");
    			
    			p.text(marker.address);
    			
    			container.append(p);
    		}
    		
    		if(!empty(marker.desc))
    		{
    			var div = $("<div class='wpgmza_infowindow_description'></div>");
    			
    			div.html(marker.desc);
    			
    			container.append(div);
    		}
    		
    		if(!empty(marker.linkd) || !empty(marker.link))
    		{
    			var link = empty(marker.link) ? marker.linkd : marker.link;
    			var p = $("<p class='wpgmza_infowindow_link'></p>");
    			var a = $("<a class='wpgmza_infowindow_link'></a>");
    			
    			a.attr("href", WPGMZA.decodeEntities(link));
    			a.attr("target", this.linkTarget);
    			a.text(this.linkText);
    			
    			p.append(a);
    			container.append(p);
    		}
    		
    		if(map.directionsEnabled)
    		{
    			var p = $("<p></p>");
    			var a = $("<a class='wpgmza_gd'></a>");
    			
    			a.attr("href", "javascript: ;");
    			a.attr("id", map.id);
    			
    			a.attr("data-address", marker.address);
    			a.attr("data-latlng", marker.getPosition().toString());
    			
    			// Legacy fields
    			a.attr("wpgm_addr_field", marker.address);
    			a.attr("gps", marker.lat+","+marker.lng);
    			
    			a.text(this.directionsText);
    			
    			p.append(a);
    			container.append(p);
    		}
    		
    		var filteringParameters = map.markerFilter.getFilteringParameters();
    		if(filteringParameters.center)
    		{
    			var distanceInKM = WPGMZA.Distance.between(
    				filteringParameters.center, 
    				marker.getPosition()
    			);
    			
    			var distanceToDisplay = distanceInKM;
    			
    			if(this.distanceUnits == WPGMZA.Distance.MILES)
    				distanceToDisplay /= WPGMZA.Distance.KILOMETERS_PER_MILE;
    			
    			var text = Math.round(distanceToDisplay*10)/10 + " ";
    			
    			if(this.distanceUnits == WPGMZA.Distance.MILES)
    				text += WPGMZA.localized_strings.miles_away;
    			else
    				text += WPGMZA.localized_strings.kilometers_away;
    			
    			var p = $("<p></p>");
    			p.text(text);
    			
    			container.append(p);
    		}
    		
    		if(marker.custom_fields_html)
    			container.append(marker.custom_fields_html);
    		
    		this.setContent(container.html());
    	}
    }

    As for the mobile search box being stacked, what would you like to change with this? Still have them side by side? You could also make the map taller?

    Thanks so much,

    Kind Regards,
    Trevor Anderson

    #49710

    cwilliams
    Member
    This reply has been marked as private.
    #49711

    SupportTeam
    Moderator

    Hi there,

    I apologize for the scripts, when looking at the site it appears copying and pasting from the forum has introduced some encoding issues, please find the scripts here which you should be able to copy and paste from correctly: https://gist.github.com/andtrev/b06b7f548c1e8b9ab93732fd11650a6a

    When doing a search and clicking on the Sabai pin do see the distance in the infowindow, but of course this is rounded to integers still as the scripts didn’t copy over correctly.

    I’m not certain why the store locator circles look like this. It seems to only happen at the 1 mile radius. I do see you are currently on Pro 7.11.26, may I ask that you please update to the latest 7.11.27 to see if that will solve the issue?

    To do this navigate to Plugins -> Installed Plugins, update information should show beneath the plugin in the list. You may need to reload this page for update information to show.

    The title search is directly connected to the store locator search, so it will only work in conjunction with the address and radius. When trying to search for a title with no address the address box is highlighted and focused. If the Sabai pin isn’t found within the address/radius search then it won’t show regardless if it’s in the title or the title is blank.

    For the UI stacking issue please try the following CSS in Maps -> Settings -> Advanced in the Custom CSS field:

    @media only screen and (max-width: 1000px){
    .wpgmza-modern-store-locator {
    width: 80%;
    left: 10% !important;
    margin-left: 0% !important
    }
    .wpgmza-inner.wpgmza-modern-hover-opaque {
    max-width: 90%;
    width: 90%;
    }
    .wpgmza-modern-store-locator .wpgmza-form-field__input {
    float: left !important;
    width: 48% !important;
    }
    }

    I’ve attached an example.json file with the first two markers of your json file so you can see what the json format would look like.

    Thanks so much,

    Kind Regards,
    Trevor Anderson

    Attachments:
    You must be logged in to view attached files.
    #49745

    cwilliams
    Member
    This reply has been marked as private.
    #49758

    SupportTeam
    Moderator

    Hi there,

    Sorry for the issues.

    Ok, I think I understand what you are looking for with the distance, please try copying and pasting the script again from https://gist.github.com/andtrev/b06b7f548c1e8b9ab93732fd11650a6a

    I’ve tested this and it is working for me, adding the amount of patios above the map, and also giving you the distance from the user’s location in the infowindow to a tenth of a mile. This will work regardless if a search is performed as long as the user has allowed for their location to be used.

    With that I’m not certain you now even need the store locator functionality?

    As for the JSON file, you can try using something like https://json-csv.com/ to get your JSON into a CSV format for easier editing and importing.

    Thanks so much,

    Kind Regards,
    Trevor Anderson

    #49760

    cwilliams
    Member
    This reply has been marked as private.
Viewing 15 posts - 1 through 15 (of 65 total)

You must be logged in to reply to this topic.