Skip Navigation

[Resuelto] Can’t get maps to show individual item’s location

Este hilo está resuelto. Aquí tiene una descripción del problema y la solución.

Problem: I have a View that shows a list of results, and in each result I would like to display a thumbnail-sized Google Map showing a custom address field. When I test the View, all the map markers are appearing in the first map, and every map except the first one is centered in the ocean with no markers applied.

Solution: Check the Loop Output to make sure that you have unique IDs on each map, and unique IDs for each map marker. Consider replacing these interactive maps with Static Maps using the Google Static Maps API, and using larger interactive maps on a detail View for each post. Example static map implementation:

<img src="https://maps.googleapis.com/maps/api/staticmap?zoom=13&size=450x150&maptype=roadmap&markers=color:red%7Clabel:S%7C[types field='address-field-slug' format='FIELD_LATITUDE,FIELD_LONGITUDE'][/types]&key=YOURAPIKEY" />

Relevant Documentation: https://toolset.com/documentation/user-guides/display-on-google-maps/
https://developers.google.com/maps/documentation/static-maps/intro

This support ticket is created hace 7 años, 3 meses. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Hoy no hay técnicos de soporte disponibles en el foro Juego de herramientas. Siéntase libre de enviar sus tiques y les daremos trámite tan pronto como estemos disponibles en línea. Gracias por su comprensión.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Este tema contiene 4 respuestas, tiene 2 mensajes.

Última actualización por Charles hace 7 años, 3 meses.

Asistido por: Christian Cox.

Autor
Mensajes
#562448

Support,

I am trying to have a map load for each users location on this page: enlace oculto

Right now the first map is showing all the locations instead of each map showing the location of the seller. Not sure where I went wrong in my loop. Can you assist?

Thanks,
Chuck

#562488
ids.png
markup.png

I see a few things going on here:
1. Your loop's row markup isn't quite right, because each row of results is a child of the previous row. See markup.png. You probably have a missing or extra closing tag somewhere that needs to be fixed in your Loop Output editor.
2. All the maps in the Loop have the same ID, which is probably why the markers all appear in the first map. See ids.png. You should use unique IDs for each map, just like you are using unique IDs for each marker. Try adding the wpv-post-id shortcode to both map_id attributes:

...map_id="map-3-[wpv-post-id]"...

3. Have you considered using Google Static Maps here? Basically it loads an image of a map instead of the full interactive map with pan and zoom controls. You will have shorter page load times, and you can still use a larger interactive map in the single post page or a detail View. enlace oculto
Example static map embed code:

<img src="<em><u>enlace oculto</u></em> field='address-field-slug' format='FIELD_LATITUDE,FIELD_LONGITUDE'][/types]&key=YOURAPIKEY" />

Replace your slug and API Key, place this shortcode in the Loop Output editor of your View, and make sure you have enabled the Static Maps API in the Google API Console.

#562630

Christian,

Thanks for your help.

1. I can't find the problem as all the divs are lining up. Is this happening because I've changed wrap to "1"?

2. Your id code was correct. The maps showed each location individually.

3. I tried implementing the code with my slug and key, but all I see is ocean. Not sure the problem?

Thanks,
Chuck

#562757
code.png

1. I can't find the problem as all the divs are lining up. Is this happening because I've changed wrap to "1"?
Yes, if you set wrap to "1" then the last closing div tag will never be applied. None of the highlighted code in code.png will be used, because the index will never be anything other than 1. All this code should be deleted, and a closing div tag should be added in its place. I have made this change for you, and removed all the wpv-item shortcodes, since they are no longer necessary for a 1 column list.

3. I tried implementing the code with my slug and key, but all I see is ocean. Not sure the problem?
It looks like you added the 'wpcf-' prefix to your field name. I have removed it, and now the static maps are showing up. I also added the "center" parameter to the request so the markers will be shown in the center of the maps. Can you take a look now?

<img src="<em><u>enlace oculto</u></em> field='zip-code'][/types]&zoom=13&size=300x150&maptype=roadmap&markers=color:red%7C[types     
      field='zip-code'][/types]&key=YOURAPIKEY" />
#563493

Awesome, looks great!

Thanks,
Chuck