You are here: Home → Forum Home → Fieldtypes → MX Google Map → Thread
Hi again :D
My product (it’s wine) pages have there own google map (with the location of where the wine was produced), thanks to MX google map
and I also have a Map where I would like to display all of the locations based on the product pages location, a sort of mash up of all the locations of all the entries
Is that possible ?
so you want do display one map with one marker related to entry + one map with ALL entries in db or only entries base on some address settings(around the major entry)?
yes, one map with ALL entries in db
I think you just need to used parameter dynamic=“no” for {exp:channel:entries} (where you want to display all entries)
Hey Max,
sorry dynamic=“no” didn’t make it work
if I put limit=“3” in exp:entries, there will be 3 maps…
I really don’t know what to do to have all the markers of all my entries :(
any other ideas ? can this be a request if it’s not possible with this version ? ![]()
try this example
so I copy pasted the example, changed the entry channel name, this is the code outputed :
[removed]
marker_icons_path = "/themes/third_party/mx_google_map/maps-icons/";
$(document).ready(function() {
$("#my_full_map").mxgoogleMaps({
latitude: {center:lat},
longitude: {center:long},
zoom: 10,
markers: [{field_name}{marker_id : {point_id},
state: "{state}",
address: "{address}",
city: "{city}",
zipcode: "{zipcode}",
latitude: {latitude},
longitude: {longitude},
draggable: false,
icon: "{icon}"},{/field_name}{field_name}{marker_id : {point_id},
state: "{state}",
address: "{address}",
city: "{city}",
zipcode: "{zipcode}",
latitude: {latitude},
longitude: {longitude},
draggable: false,
icon: "{icon}"},{/field_name}{field_name}{marker_id : {point_id},
state: "{state}",
address: "{address}",
city: "{city}",
zipcode: "{zipcode}",
latitude: {latitude},
longitude: {longitude},
draggable: false,
icon: "{icon}"},{/field_name}{field_name}{marker_id : {point_id},
state: "{state}",
address: "{address}",
city: "{city}",
zipcode: "{zipcode}",
latitude: {latitude},
longitude: {longitude},
draggable: false,
icon: "{icon}"},{/field_name}],
,mapTypeId: google.maps.MapTypeId.ROADMAP
,navigationControl: true
,scaleControl: true
,mapTypeControl: true
,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
,scrollwheel:false
,disableDoubleClickZoom:true
}
);
});
[removed]
for some reason the ee tags are not working
{field_name} - is it your field name for mx google map ?
Thanks Max, it works !
But there seems to have a syntax problem in your “Display more that 1 entry on the map” example :
an extra comma before mapTypeId
(I got rid of it and the map displayed)
try to add parameter
backspace=“1”
to {exp:channel:entries} tag
yeah I could have put just taking off the comma worked ![]()
...
{/exp:channel:entries}],
,mapTypeId: google.maps.MapTypeId.ROADMAP,
...
Hi again
so for some weird reason my full map (with multiple markers) is not working anymore, so I took the example code from the documentation and it doesn’t work either !
<!DOCTYPE html>
<html>
<head>
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></ script>
< script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></ script>
< script type="text/javascript" src="/themes/third_party/mx_google_map/mxgooglemap.js"></ script>
< script type="text/javascript">
marker_icons_path = "/themes/third_party/mx_google_map/maps-icons/";
$(document).ready(function() {
$("#my_full_map").mxgoogleMaps({
latitude: {center:lat},
longitude: {center:long},
zoom: 10,
markers: [{exp:channel:entries channel="products" dynamic="off" backspace="1"}{googlecarte}{marker_id : {point_id},
state: "{state}",
address: "{address}",
city: "{city}",
zipcode: "{zipcode}",
latitude: {latitude},
longitude: {longitude},
draggable: false,
icon: "{icon}"},{/googlecarte}{/exp:channel:entries}]
,mapTypeId: google.maps.MapTypeId.ROADMAP
,navigationControl: true
,scaleControl: true
,mapTypeControl: true
,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
,scrollwheel:false
,disableDoubleClickZoom:true
}
);
});
</ script>
</head>
<body>
<div style="height:600px;width:100%"><div id="my_full_map" style="width: 100%; height: 100%"></div></div>
</body>
</html>
Where is my error here ? :(
Thanks for your help Max
Cheers,
William
Still no luck with this, it’s driving me crazy !
This is the code outputed :
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">< /script>
< script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">< /script>
< script type="text/javascript" src="http://cavis.fr/themes/third_party/mx_google_map/mxgooglemap.js">< /script>
< script type="text/javascript">
marker_icons_path = "/themes/third_party/mx_google_map/maps-icons/";
$(document).ready(function() {
$("#googlemap").mxgoogleMaps({
latitude: {center:lat},
longitude: {center:long},
zoom: 10,
markers: [
{marker_id : 13,
state: "",
address: "",
city: "",
zipcode: "",
latitude: 44.06193297865348,
longitude: -121.27584457397461,
draggable: false,
icon: "default"},
{marker_id : 43,
state: "",
address: "",
city: "",
zipcode: "",
latitude: 43.09573279338701,
longitude: 2.187471347363279,
draggable: false,
icon: "vanel.png"},
{marker_id : 12,
state: "",
address: "",
city: "",
zipcode: "",
latitude: 44.06193297865348,
longitude: -121.27584457397461,
draggable: false,
icon: "default"},
{marker_id : 34,
state: "",
address: "",
city: "",
zipcode: "",
latitude: 43.12353691829565,
longitude: 2.1583887000000157,
draggable: false,
icon: "vanel.png"},
{marker_id : 41,
state: "",
address: "",
city: "",
zipcode: "",
latitude: 43.0934531225453,
longitude: 2.3088919999999957,
draggable: false,
icon: "1erebulles.png"},
{marker_id : 10,
state: "",
address: "",
city: "",
zipcode: "",
latitude: 43.092724333963254,
longitude: 2.3170756869628883,
draggable: false,
icon: "family.png"},
{marker_id : 32,
state: "",
address: "",
city: "",
zipcode: "",
latitude: 43.09899828331732,
longitude: 2.3005756088867146,
draggable: false,
icon: "1erebulles.png"},
{marker_id : 29,
state: "",
address: "",
city: "",
zipcode: "",
latitude: 43.0934531225453,
longitude: 2.3088919999999957,
draggable: false,
icon: "1erebulles.png"},
{marker_id : 26,
state: "",
address: "",
city: "",
zipcode: "",
latitude: 43.108272941494896,
longitude: 2.250707978881832,
draggable: false,
icon: "1erebulles.png"},
{marker_id : 31,
state: "",
address: "",
city: "",
zipcode: "",
latitude: 43.105139768191286,
longitude: 2.244613999999996,
draggable: false,
icon: "1erebulles.png"},
],
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
scaleControl: true,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
scrollwheel:true,
disableDoubleClickZoom:true
}
);
});
[removed]
Can you see an error ? I still get a blank page :(
ah… my mistake from examples
latitude: {center:lat},
longitude: {center:long},
just the coordinates which you want to used as center of your map on the place of {center:lat} & {center:long}
$("#googlemap").mxgoogleMaps({
latitude: 43.108272941494896,
longitude: 2.250707978881832,
p.s. I’m still think about how better to put the center of map when you used the multipoints and it is not automap tag.
Hello Max, thanks for the plugin, got everything to work up to now, except when I use the code to show multiple markers from multiple entries, it only shows one…
Here is the generated code in JS, thanks for any help
:
[removed]
marker_icons_path = “/themes/third_party/mx_google_map/maps-icons/”;
$(document).ready(function() {
$(”#my_full_map”).mxgoogleMaps({
latitude: -3.27230603380688,
longitude: 3.1344655767212,
zoom: 5,
markers: [{marker_id : 3,
state: “”,
address: “”,
city: “”,
zipcode: “”,
latitude: 1.5681025418680914,
longitude: 32.6762580871582,
draggable: false,
icon: “”},{marker_id : 2,
state: “”,
address: “”,
city: “”,
zipcode: “”,
latitude: -10.760461055348745,
longitude: 25.579090118408203,
draggable: false,
icon: “default”},{marker_id : 4,
state: “”,
address: “”,
city: “”,
zipcode: “”,
latitude: 1.4802430218863418,
longitude: 30.259265899658203,
draggable: false,
icon: “”},]
,mapTypeId: google.maps.MapTypeId.ROADMAP
,navigationControl: true
,scaleControl: true
,mapTypeControl: true
,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
,scrollwheel:false
,disableDoubleClickZoom:true
}
);
});
[removed]
Interested… for some reason some of icons is empty - is why your can see it. I will try to prevent it in new build.