[Gelöst] Problem displaying google map

[Author]

Artikel

[francoiseR]

Hi,

I'm trying to display a google map in two kinds of custom posts, in one of them it shows perfectly, but in the other one (when the code is exactly) it doesn't work and in the code inspector - console appears:

Uncaught Error: Syntax error, unrecognized expression: select[name="to_post" default_value="prueba"]

This value "prueba" is a custom post that I have deleted, but seems that types didn't deleted completely.

The code I have used in the view is:

HTML

<p>[types field="direccion" show_name="true" ] [/types]</p>
<p>[types field="comuna" show_name="true"][/types]</p>
<p>[types field="web" target="_blank" show_name="true"][/types]</p>

<div id="js-map-element"
     class="team-main"
     data-marker-title='[wpv-post-title]'
     data-marker-lat='[types field="latitud"][/types]'
     data-marker-lon='[types field="longitud"][/types]'>
    [wpv-post-body view_template="None"]
    <div id="js-main-gmap-canvas" class="google-maps team-map-reduced-height"></div>
</div>

CSS

.google-maps img {
    max-width: none;
}

#js-main-gmap-canvas{
    height: 260px;
  
}

JS

jQuery( document ).ready(function($) {
  $("#js-main-gmap-canvas").wpvmap({
    generalMapZoom: 17,  //reduce default zoom level
  });
});

Thanks in advance

[emerson]

Dear francoiseR,
Can you try putting the Google Maps div HTML markup in one line block of code? So please change it from this:

<p>[types field="direccion" show_name="true" ] [/types]</p>
<p>[types field="comuna" show_name="true"][/types]</p>
<p>[types field="web" target="_blank" show_name="true"][/types]</p>
 
<div id="js-map-element"
     class="team-main"
     data-marker-title='[wpv-post-title]'
     data-marker-lat='[types field="latitud"][/types]'
     data-marker-lon='[types field="longitud"][/types]'>
    [wpv-post-body view_template="None"]
    <div id="js-main-gmap-canvas" class="google-maps team-map-reduced-height"></div>
</div>

To this:

<p>[types field="direccion" show_name="true" ] [/types]</p>
<p>[types field="comuna" show_name="true"][/types]</p>
<p>[types field="web" target="_blank" show_name="true"][/types]</p>
 
<div id="js-map-element" class="team-main" data-marker-title='[wpv-post-title]' data-marker-lat='[types field="latitud"][/types]' data-marker-lon='[types field="longitud"][/types]'>[wpv-post-body view_template="None"]<div id="js-main-gmap-canvas" class="google-maps team-map-reduced-height"></div></div>

Some browsers have a JS glitch on code spaces and indentation. After you do the above change, clear your browser cache and history then re-test. Please let me know how it goes. Thanks. 🙂

Cheers,
Emerson

[francoiseR]

Emerson,

I tested it, but it doesn't works. Now doesn´t appears the code but a whithe space. hidden link

It's extrange because in other type of custom post the map works perfectly. Like this: hidden link

[emerson]

Dear francoiseR,
Thanks for the confirmation. I have enabled your next reply as private. I would like to see this issue in your site and debug this in your site. Before letting us check on this, please backup your site files and database. Then provide the login to your WordPress site "agenda.nataliacasado.com" on the private reply.
This is only visible to Toolset supporters and not to anyone 🙂
Thanks again.

Cheers,
Emerson

[emerson]

Dear Francoise,
Thanks for the login. I've checked your site and did some debugging. It seems that you are using the same IDs for your maps in two content templates ("js-main-map-canvas"). Views won't queue the Google Map CSS and JS on the affected post type content template "Sala de cine" because of this.
The solution is to assign a unique ID for "Sala de cine". So I revise your relevant Google Map HTML, CSS and JS from the one you have originally provided here: https://toolset.com/forums/topic/problem-displaying-google-map/#post-251058

To this (take note of the new id "js-main-map-canvas-unique" instead of "js-main-map-canvas":
HTML:

<div>[types field="direccion" show_name="true" ] [/types]</div>
<div>[types field="comuna" show_name="true"][/types]</div>
<div>[types field="barrio" show_name="true"][/types]</div>
<div>[types field="web" target="_blank" show_name="true"][/types]</div>

<div id="js-map-element"
     class="team-main"
     data-marker-title='[wpv-post-title]'
     data-marker-lat='[types field="latitud"][/types]'
     data-marker-lon='[types field="longitud"][/types]'>
    [wpv-post-body view_template="None"]
    <div id="js-main-map-canvas-unique" class="google-maps team-map-reduced-height"></div>
</div>

[wpv-view name="peliculasxsala"]

CSS:

.google-maps img {
    max-width: none;
}
#js-main-map-canvas-unique{
    height: 260px;  
}

JS:

jQuery( document ).ready(function($) {
  $("#js-main-map-canvas-unique").wpvmap({
    generalMapZoom: 17,  //reduce default zoom level
  });
});

It's now working fine here: hidden link

I also fix your Js console error on the "buscarpeliculas" View by changing the JS to this:

jQuery(document).ready(function($){
  $('select[name="to_post"][default_value="prueba"]').on('change', function(event){
    $(window.location).attr('href', $(this).val());
  });
});

Maybe if you are not anymore using prueba. You can remove it from the jQuery selector. And have it just like this:

jQuery(document).ready(function($){
  $('select[name="to_post"]').on('change', function(event){
    $(window.location).attr('href', $(this).val());
  });
});

Please let me know how it goes. Thanks 🙂

Cheers,
Emerson

[francoiseR]

Emerson,

Thank you very much! It works perfectly

Excellent pluggin and support!