objectivehtml / google-maps-for-craft Goto Github PK
View Code? Open in Web Editor NEWThe complete geolocation toolkit for Craft CMS.
License: Other
The complete geolocation toolkit for Craft CMS.
License: Other
I'm seeing this oddness with the Zoom Controls on a map rendered from a template in both FireFox and Chrome: http://screencast.com/t/n0oNjhLuoSbH
I don't think it's related to my template code but here it is just in case:
{% set options = {
id: 'googlemap',
width: '720px',
height: '500px'
} %}
{{ craft.googleMaps.map(options) }}
{% for entry in craft.entries.section('locations') %}
{{ craft.googleMaps.data('googlemap', entry.map) }}
{% endfor %}
Hi,
In the ExpressionEngine version, there is the option to add the following hidden field to a search form to always search within a specific country:
<input type="hidden" name="country" value=", UK" />
Is something similar possible with the Craft version?
Hi,
When i try to use the search on proximity I get an SQL error Column not found distance whatever i put in for the order e.g. MyFieldHandle_distance I still get Column not found ... Any idea how to fix this?
This is the code I use:
{% set query = craft.request.getParam('q') %}
{% if query is defined %}
{% set searchParams = { 'address': query, distance: 200 } %}
{% set foundLocations = craft.entries.section('locations').map(searchParams).order('googleMapField_distance asc') %}
{% else %}
{% set foundLocations = locations %}
{% endif %}
Rather than submit a pull request, just wanted to discuss first if this should be solved on a case-by-case basis as the fix is a little hacky.
There seems to be a general issue with overflow for the tooltips associated with a marker, as per below:
// Fix tooltip overflow issues
.gm-style-iw > div {
width: auto !important;
}
And after the fix:
While I have made this change to fix front-facing maps, how is the best way to target the field-type? Seems to be only a Chrome issue with Firefox and Safari working as expected.
is it possible to return all the entries visible on the map? Sort of like the way yelp does it where theres some kind of call back when you zoom or move the map?
Using the fieldtype in a field called groupAddress works brilliantly, unless Google Maps can't find the location.
{% set location = craft.request.getParam('location') %}
{% set params = {
address: location,
distance: 10,
unit: 'miles'
} %}
{% set locEntries = craft.entries.groupAddress(params).section('groupEntries').relatedTo(service).order('distance asc') %}
If I enter something like "lalalala", which returns no results on google maps, this then throws the common "Column not found" error.
CDbCommand failed to execute the SQL statement: SQLSTATE[42S22]: Column not found: 1054 Unknown column 'distance' in 'order clause'.
If I leave off the .order('distance asc')
parameter, then it doesn't throw an error, but it just shows all results. Outputting {{ locEntries | length }}
returns the correct amount of results (even showing 0 when no results are found close to the entered location), but then if entering e.g. lalalala again, it shows the total of all entries, when I'd expect 0.
I can't see any way to check if the location is a valid one before trying to filter the results by it, else it'd be a simple conditional workaround, though obviously it returning 0 results and not throwing an error would be preferable.
You plugin doesn't appear in the Control Panel. I guess because your plugin folder has the wrong syntax. How should I rename it?
Is it possible to show the distance between the visitor and the author in KM in an entry?
The author of the entry has some address fields you can use to calculate (zipcode, address, city)
I've created a map with several markers and a polygon. I've tried to set and change the fillColor and strokeColor options by following the wiki.
{{ craft.googleMaps.polygon('map', points, {strokeColor: '#ff0000}) }}
Above is an example of how I'm currently doing it. Has anyone else run into issues where you can not set the strokeColor or fillColor and it just defaults to black?
I'm struggling to understand this part...
I have the address for each of my store locations geocoded. How do I get pieces of data out in the template?
For example, if I want to center my map (https://github.com/objectivehtml/Google-Maps-for-Craft/wiki/Set-Map-Center) and use the lat & long stored in the geocoding... how would I do that?
The code example on that page is:
{{ craft.googleMaps.center('map', 40, -86) }}
How do I get 40 and -86 to fill with the lat/long from the geocoding?
Hi - I'm having real problems with the default zoom setting. My code looks like this:
{% if entry.mapZoom %}
{% set mapZoom = entry.mapZoom %}
{% else %}
{% set mapZoom = 17 %}
{% endif %}
{% set options = {
id: 'map' ~ entry.id,
width: '100%',
height: '400px',
options: {
disableDoubleClickZoom: true,
zoom: 4,
zoomControlOptions: {
position: 'google.maps.ControlPosition.LEFT_CENTER',
style: 'google.maps.ZoomControlStyle.LARGE'
}
}
} %}
{{ craft.googleMaps.map(options) }}
{{ craft.googleMaps.data('map' ~ entry.id, entry.map) }}
According to the Google docs, I should be able to pass a numerical zoom value in there, but this doesn't seem to work - it shows the full close up map regardless of what I put in there.
Ideally what I want to do is to pass in the mapZoom value which comes from the CMS, but if I use:
zoom: mapZoom
I get a console error of "Uncaught InvalidValueError: setZoom: not a number". This is less of a problem though if I can at least get the zoom working.
Hi,
Great plugin, really liking it!
I think I've found a bug though where markers are not being deleted. In my situation I have added a new marker and trying to delete the old marker. I select the marker and hit delete and it is removed from the map. However it still shows on the map on the front end of site and if I go back into the entry with the map field it has reappeared again there as well.
Cheers
Dave
If an address has a unit or apartment number, Google returns a # and then the number. This is not being handled in the static map which takes in the full unencoded address. I added in a $url = str_replace("#", "%23", $url);
right after $url = $this->url . '?' . $data->getParameters();
in the static maps service to catch this case, and it takes care of this issue just fine. Without this fix, the request 400's because the address cuts off at the # sign.
Justin,
Sorry for the request on Thanksgiving–at the inlaws trying to kill some time so I thought I would try to do some tinkering on this. Happy Thanksgiving btw!
I'm trying to basically do the same thing in Craft as you can with the EE directions form (https://objectivehtml.com/google-maps/examples/directions-form). Is this possible in Craft yet?
Using {{ marker.address }} in my template is there a way to just get the city or locality?
For example: London or Los Angeles.
This is my current markup:
{% for marker in entry.location.getMarkers() %}{{ marker.address }}{% endfor %}
Is there any way to keep the map centered on the marker(s) bounds and also manually set the zoom level?
{% set mType = contentBlock.googleMapType | raw %}
{% set mZoom = contentBlock.googleMapZoom.value %}
{% set mapID = 'map' ~ loop.index %}
{% set options = {
id: mapID,
width: '100%',
height: contentBlock.googleMapHeight ~'px',
zoom: mZoom,
options: {
mapTypeId: '' ~ mType,
maxZoom: 20,
disableDoubleClickZoom: true,
zoomControlOptions: {
position: 'google.maps.ControlPosition.LEFT_CENTER',
style: 'google.maps.ZoomControlStyle.MEDIUM'
}
}
} %}
{{ craft.googleMaps.map(options) }}
{{ craft.googleMaps.data(mapID, contentBlock.googleMap) }}
The site I'm building has a potential for multiple maps on one page. I was going to use the block ID as the id - but numbers do not work as the id. I appended a 'm' on the front of the id, but that's not 100% ideal.
id: 'm123'
works while
id: '123'
does not.
I'm running into an issue when using {{ craft.googleMaps.marker('mapID', markerInfo) }} to add markers to the map. It appears I'm being limited to 10 markers; however, the loop that this is found in is returning 150 entries.
Is there a way that I can display more markers on the map? I was looking for a parameter that I might be able to set in the map's options, but I wasn't able to find anything.
Hey there! I just found this plugin, and so far it seems awesome. However, I'm having a bit of trouble with something. I'm trying to add in a simple marker map but I can't figure out to get it to zoom out. Here is my code. Is this a bug or am I using it incorrectly?
Also, is there a way I can grab the elements inside the map and style them? Say like changing the color of what is in "content:"
Thanks!
Hi,
I'm trying to customize the info window of markers in my template. I was able to do exactly what I wanted with this code, but ran into the Geocoder limit mentioned in other issues here:
{% set store = entry.mapStore ~ '<br>' ~ entry.mapIndirizzo ~ '<br>' ~ entry.mapCap ~ ' ' ~ entry.mapCitta ~ '<br><a target="_blank" href="' ~ entry.url ~ '"><img src="/assets/img/arrow.svg"></a>' %}
{% set address = entry.mapIndirizzo ~ ', ' ~ entry.mapCap ~ ' ' ~ entry.mapCitta ~ ', ' ~ entry.mapCountry %}
{% set marker = {
address: address,
content: store,
clustering: false
} %}
{{ craft.googleMaps.marker('map', marker) }}
So I modified my code to get around the Geocoder issue, but now I can't set the output of the info window content. I tried this:
{% set store = entry.mapStore ~ '<br>' ~ entry.mapIndirizzo ~ '<br>' ~ entry.mapCap ~ ' ' ~ entry.mapCitta ~ '<br><a target="_blank" href="' ~ entry.url ~ '"><img src="/assets/img/arrow.svg"></a>' %}
{{ craft.googleMaps.data('map', entry.map, {
markerOptions: {
content: store }
}) }}
But I guess I'm using markerOptions the wrong way. Is there a way to get this to work? Changing all info windows manually in the admin is not really an option or is there a way to set this globally?
Thanks in advance. And thanks for the great plugin.
Joern
When creating a new entry (using the geocoding service based on longitude and latitude fields)
The geocoding service fires and stores the data in craft_googlemaps_geocoder_cache and also as Json in the craft content entries table (under the correct field)
However, the data does not get saved to craft_googlemaps_locations.
Only when I edit (using the exact same form) and save again, does the location get saved into craft_googlemaps_locations
This occurs on both my front end form, and the backend for me.
Thanks,
Richard
Hi,
In my template I have:
{% set options = {
id: 'map',
width: '100%',
height: '450px',
} %}
{{ craft.googleMaps.map(options) }}
{{ craft.googleMaps.data('map', entry.eventMap) }}
{{ craft.googleMaps.zoom('map', 5) }}
However, it doesn't matter what zoom value I specify the map remains at the most zoomed in level. Am I doing something wrong here?
I want to be able to add a google.maps.event.addListener to a map instance on my page so I can add better mobile support ( i.e. prevent scrolling / zooming unless the user first taps on the map. How do I get map instance? Or ideally could these options be made available within the plugin.
So im seeing strange display behavior with the default map fieldtype in the backend?
https://www.dropbox.com/s/9beih1j527nj7vr/Screenshot%202014-09-23%2018.05.59.png?dl=0
It shows this way in the field settings as well as when i have a field on the edit screen? Seems like some kind of CSS conflict maybe?
Hi there - I'm working on a "Find your nearest store" and for some reason it isn't returning distances. You can see a working example at http://lnsdev.pepperdigital.com/results/?q=evesham. The code I'm using is below (based on your example at https://github.com/objectivehtml/Google-Maps-for-Craft/wiki/Search-by-Proximity):
{% set query = craft.request.getParam('q') %}
{% set params = {
address: query,
distance: 200
} %}
{% set options = {
id: 'map',
width: '400px',
height: '300px',
clustering: true
} %}
{{ craft.googleMaps.map(options) }}
<ul class="search-results">
{% set entries = craft.entries.section('store').map(params).order('map_distance asc') %}
{% for entry in entries %}
<li>
<h3>{{ entry.title }}</h3>
{{ craft.googleMaps.data('map', entry.map) }}
{% for marker in entry.map.markers() %}
<p>Distance - {{ marker.distance }}</p>
{{ marker | inspect }}
{% endfor %}
</li>
{% endfor %}
</ul>
Updated the plugin in Craft to the latest version here and my admin shows the following error;
Property "Craft\GoogleMaps_GoogleMapFieldType._results" is not defined.
/craft/plugins/googlemaps/fieldtypes/GoogleMaps_GoogleMapFieldType.php(16)
$t->_results[$event->params['element']->id] = $event->params['result'];
Is it possible to have satellite view in the CP to help with placing markers please?
I've got it all installed and working on a local Craft project, but upon checking the project out onto to a staging server (via SVN - all the files are identical and its using the same database) the staging server version craps out with that message on any front-end template that attempts to use the field type.
The local version is in Dev mode, the staging version is not. Other than that, there should be no difference in server environment.
I'm trying to get the distance search to work with the 8.3.0 release of the plugin. I used version 7.3.0 and everything worked fine. After upgrading the distance is not calculated correctly anymore. I use this code:
{% set query = craft.request.getParam('q') %}
{% set params = {
address: query,
distance: 100
} %}
{% set entries = craft.entries.section('storeLocator').map(params).order('distance asc') %}
I get results that are just not correct. I can't actually find a real pattern (there might be one).
I'm getting this error Craft\ElementCriteriaModel and its behaviors do not have a method or closure named "map"
with the following code
{% set query = craft.request.getParam('Locatie') %}
{% set params = {
address: query,
distance: 200
} %}
{% set entries = craft.entries.map(params).order('map_distance asc') %}
Maybe I'm missing something, but using the fieldtype, I'm only able to place a marker at a location by typing in it's address. I'm working on a website for a remote area, and as such, doesn't resolve very accurately to addresses - if at all.
Is it possible to 'drop' a pin at a certain location?
Hello Justin,
Let me describe my setup as requested in our previous email conversation. I have a setup where the GoogleMaps field is called in the Section entry using the code below:
{% for entry in craft.entries.section('SectionName').find() %}
{{entry.title}}
{{entry.body}}
{{entry.googlemap}}
{% endfor %}
It provides me however with the following error:
Interne Serverfout
Object of class Craft\GoogleMaps_MapDataModel could not be converted to string
-Ruud
What's the best way to make use of this solution, which keeps the map centred when the browser window size changes?
I have this working perfectly in my local environment. After pulling everything onto my staging/remote dev server (via Git) and updating the DB - The plugin no longer shows up in the backend on the staging site (breaking all my templates using it)
Php version issue?
Local: PHP Version => 5.4.30
Staging: PHP Version => 5.3.2-1ubuntu4.24
This workflow is working fine with several other plugins and the site as a whole etc.
I’m not entirely sure how that happened but in my case countries in addresses get translated resulting in double-, triple, etc. markers being saved for the exact same location which breaks the marker display in the rendered map. We have three locales active (de, en, fr), the backend is being used with at least two of them.
../Vastned/craft/app/models/BaseModel.php(77)
65 * @param string $name
66 *
67 * @return mixed
68 */
69 public function __get($name)
70 {
71 if (in_array($name, $this->attributeNames()))
72 {
73 return $this->getAttribute($name);
74 }
75 else
76 {
77 return parent::__get($name);
78 }
79 }
80
81 /**
82 * PHP setter magic method.
83 *
84 * @param string $name
85 * @param mixed $value
86 *
87 * @return mixed
88 */
89 public function __set($name, $value)
This is my template code:
{% set options = {
id: 'map',
width: '400px',
height: '300px'
} %}
{{ craft.googleMaps.map(options) }}
Having trouble understanding how to display a map in a template. I've created a field (handle: googleMap), attached it to a Single (handle: lake) and set a location. What's the most basic tag to put in a template to get it to display please?
Hello,
I think this is something to do with how I've set this up, but I have the latest version from master (0.8.2 as best I can tell?) and am getting this error.
CDbCommand failed to execute the SQL statement: SQLSTATE[42S22]: Column not found: 1054 Unknown column 'distance' in 'order clause'.
I'm trying to use the search by proximity feature: https://github.com/objectivehtml/Google-Maps-for-Craft/wiki/Search-by-Proximity
This is my lookup and the rest of the code looks the same.
{% set entries = craft.entries.section('storeLocations').level(2).map(params).order('map_distance asc') %}
{% set entries = craft.entries.section('storeLocations').level(2).map(params).order('distance asc') %}
{% set entries = craft.entries.section('storeLocations').map(params).order('map_distance asc') %}
{% set entries = craft.entries.section('storeLocations').map(params).order('distance asc') %}
{{ craft.googleMaps.map(options) }}
<ul class="search-results">
{% for entry in entries %}
<li>
<h4><a href="{{ entry.url }}">{{ entry.title }}</a></h4>
{{ craft.googleMaps.data('map', entry.googleMapField) }}
{% for marker in entry.googleMapField.markers() %}
<p>
<b>{{ marker.title }} - {{ marker.distance }}</b> <br>
</p>
{% endfor %}
</li>
{% endfor %}
I've read all through the docs, but maybe missed something. This commit seems to indicate there should be a distance field or ability to set that, but I'm confused what that means and if its some sort of setup process I missed? 77a5ff8 ?
Thanks for any help at all. I'm stumped!
Would it be a true statement that I cannot cache markers using {% cache %} when creating them with the "craft.googleMaps.marker" tag?
Is this because the output is JS and is moved to the footer?
Uncaught TypeError: undefined is not a function plugin.js?d=1415607794:553
GoogleMaps.Marker.GoogleMaps.BaseClass.extend.setIcon plugin.js?d=1415607794:553
GoogleMaps.Marker.GoogleMaps.BaseClass.extend.constructor plugin.js?d=1415607794:439
value base.js?d=1415607794:69
proto.constructor base.js?d=1415607794:30
(anonymous function)
/*<![CDATA[*/
var map = new GoogleMaps.Map(document.getElementById("oh-map-map"), {"clustering":true});
new GoogleMaps.Marker(map,{"address":"Vijzelstraat 31, 1017 HD Amsterdam, Nederland","content":"Rocky Mountain National Park","clustering":true});
new GoogleMaps.Marker(map,{"address":"Nederland","content":"Rocky Mountain National Park","clustering":true});
new GoogleMaps.Marker(map,{"address":"Jasmijnstraat 5, 1031 EV Amsterdam, Nederland","content":"Rocky Mountain National Park","clustering":true});
new GoogleMaps.Marker(map,{"address":"Jan van Galenstraat 6, 1051 KM Amsterdam, Nederland","content":"Rocky Mountain National Park","clustering":true});
/*]]>*/
{% set options = {
id: 'map',
width: '100%',
height: '820px',
clustering: true
} %}
{{ craft.googleMaps.map(options) }}
{% for entry in craft.entries.section('kaart') %}
{% for marker in entry.kaart.getMarkers() %}
{% set marker = {
address: marker.address,
content: 'Rocky Mountain National Park',
clustering: true
} %}
{{ craft.googleMaps.marker('map', marker) }}
{% endfor %}
{% endfor %}
{{ craft.googleMaps.data }} works perfect though. The problem is {{ craft.googleMaps.marker }}
@objectivehtml can you get a look at it?
I have a series of address fields on an entry, with a custom map fieldtype. It works great in the admin where i can have the map there and it updates and adds a marker as they fill in the address.
The issue im having is that its always all the way zoomed in and unless they remember to zoom the map out before saving the entry the map that shows is way to zoomed in.
So what im hoping to do is to set the zoom manually on the front end.
heres what i have
{% set options = {
id: 'map',
zoom: 16,
'height': '300px',
'width': '100%',
} %}
{{ craft.googleMaps.map(options) }}
{{ craft.googleMaps.data('map', entry.map) }}
{{ craft.googleMaps.zoom('map', 16) }}
it outputs the map but doesnt update the zoom. Seems to be a timing issue as if i go to the console and type map.setZoom(16) it does update the zoom properly.
Any ideas? maybe i should just add the js code with some kidn of settimeout?
Related to this it would be great if there could be a way to set the default zoom returned by the geocoder to make this less of an issue in the future.
I have a page that's loaded over Ajax with maps on it but the maps won't load.
I know with the regular google js code they suggest delaying the initialize until after a callback from the main js like this.
Would love to see some built in way to do that here
http://screencast.com/t/dq98YdVCt
When I uncheck the "ALL" option to deselect all options for Default Buttons and then click SAVE, the setting isn't saved correctly. All options are still checked when I go back to settings page.
Hi!
I feel like this is a bug, but it might be expected behavior.
I use the Address Fields settings in the Field Type, not in the plugin settings.
When I enter an address, the map puts the marker in the correct spot as expected. I then move the marker directly on the map, to fine-tune the location, and save. The data is saved correctly and the lat/lng info in the front-end template data reflects my fine tunning. If I then go back in the entry edit form, as soon as I open it, the marker moves back to the address associated spot, not the saved one.
I feel like it should use the map saved data first. If I then go and change the address, it can update the marker, but not before then.
Hope this makes sense.
Thanks,
Eric
I'm finding that many of the default controls (zoom controls, etc.) are being squished horizontally (maybe 50%) on all rendered maps. I am also seeing that InfoWindows seem to have a set height and width displayed which creates unnecessary scroll bars. Here is the rendered infoWindow html:
<div style="top: 9px; position: absolute; left: 15px; width: 166px; height: 72px;" class="gm-style-iw">
<div style="overflow: auto; width: 143px; height: 72px;">
<div style="overflow: auto;" class=""><strong>Title</strong><br>Address, etc.</div>
</div>
</div>
I have looked through all the code to see where this is set but can't find the source, and there is nothing in my page css that would affect the map (other than the generic eric reset.css).
As a side-note, it would also be nice if the plugin allowed you to create your own custom infoWindows (i.e. background and all). Perhaps this functionality is there, but I haven't discovered it.
I've used the new JS geocoding to plot markers on my maps from my address fields. All works well except the zoom level is 100% on the map when the entry form loads. Anyway to zoom it out a bit?
Here's a screenshot:
http://screencast.com/t/y6ZtWERZMgP
So im trying to build a map with custom styles, and a custom icon graphic. In js it would be something like this
var myIcon = {
url: "/images/map-pin.png",
scaledSize: new google.maps.Size(20,30)
};
map.setOptions({icon:myIcon})
its the "scaledSize" property. Im able to get it to load a custom url but no real way to load a custom size on the marker?
this is what i have now
{% if entry.map %}
{{ craft.googleMaps.data('map', entry.map, { fitBounds: false }) }}
{% set markers = entry.map.markers() %}
{% set marker = {
content: entry.place,
lat: markers[0].lat,
lng: markers[0].lng,
fitBounds: false,
options: {
icon: {
url: "/images/map-pin.png",
scaledSize: [20,30]
}
}
} %}
{{ craft.googleMaps.marker('map', marker) }}
{{ craft.googleMaps.center('map', markers[0].lat, markers[0].lng) }}
everything besides the scaled size works fine.
Should i just do this part from javascript?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.