I get this error in the api's main.js Uncaught InvalidValueError: setPlace: unknown property attributes
Can't figure out what is causing it. Or what specific functionality is failing. Will update question when I fin out more.
All worked in v3.16. I am now using maps api 3.19 with gmap3 5.1.1
Any ideas to what it could be would be helpful
Update:
It is the place: place, part in the below that causes it:
marker: {
options: {
icon:
new google.maps.MarkerImage('/media/img/map_markers/map_marker_' + classname + '.png',
new google.maps.Size(37, 31),
new google.maps.Point(0,0),
new google.maps.Point(14, 31),
new google.maps.Size(37, 31)
),
place: place,
draggable:true
},
The problem is that place under marker > options has become a used key by the google api.
Changed place to myplace and you are up and running again:
marker: {
options: {
icon:
new google.maps.MarkerImage('/media/img/map_markers/map_marker_' + classname + '.png',
new google.maps.Size(37, 31),
new google.maps.Point(0,0),
new google.maps.Point(14, 31),
new google.maps.Size(37, 31)
),
myplace: place,
draggable:true
},
Related
I'm changing from markers to vector layer and I can't make my site to use any sort of non-default icon, whatever I put in externalGraphic style attribute doesnt have effect on map. I just see orange circles. To be exact, no matter what I put in Openlayers.Style to style my point features, I get default look of icons.
It should be easy, but I try for days and can't make it work, so I came here for help. When warstwa_ikon was markers layer everything was fine, but I need extra functionality.
Thats my styling code:
var StylIkony = new OpenLayers.Style({
externalGraphic : '${symbol}',
graphicWidth : 15,
graphicHeight : 15,
cursor : 'pointer'
});
var StylWarstwyIkon = new OpenLayers.StyleMap ({
default: StylIkony,
delete: StylIkony,
select: StylIkony,
temporary: StylIkony
});
warstwa_ikon = new OpenLayers.Layer.Vector("Ikony Lokali",{ eventListeners: { "featureselected": WywolajRamke }});
warstwa_ikon.StyleMap = StylWarstwyIkon;
map.addLayer(warstwa_ikon);
Thats already executed code from generating Features:
WspolrzedneIkony = new OpenLayers.Geometry.Point(2279231, 7127620);
Ikona = new OpenLayers.Feature.Vector(WspolrzedneIkony,
{ "symbol": "../GRAFIKI/IkonyLokali/10.png", "idLokalu": 1 });
warstwa_ikon.addFeatures([Ikona]);
WspolrzedneIkony = new OpenLayers.Geometry.Point(2279245, 7127630);
Ikona = newOpenLayers.Feature.Vector(WspolrzedneIkony,
{ "symbol": "../GRAFIKI/IkonyLokali/6.png", "idLokalu": 2 });
warstwa_ikon.addFeatures([Ikona]);
Thats DOM of my vector layers (warstwa_ikon) StyleMap:
http://s24.postimg.org/hwfjakg0l/stylemap.png
Thats DOM of my vector layer first Feature, which should be styled:
http://s9.postimg.org/oxlocyku7/feature.png
Sorry, I can't include normal images yet. I should add that this is not a problem with accessing icon image file, I can't get layer to use any sort of images, even from internet links.
Declares StyleMap on layer creation as:
warstwa_ikon = new OpenLayers.Layer.Vector("Ikony Lokali", {
styleMap: StylWarstwyIkon,
eventListeners: ...
});
and removes:
warstwa_ikon.StyleMap = StylWarstwyIkon;
I have used the goMap jQuery plugin for some easy and simple programmatic placing of pushpins on Google maps; I'm going to create a site, though, where various "categories" of places are shown simultaneously, and I want to differentiate them visually by making each group/category a different color.
Is anybody aware of either how this can be done in goMap, or which jQuery plugin makes it possible? I'm not married to Google maps; Bing maps would be fine, too.
You don't really need a plugin, just create the different markers in your js, for example:
App.pinColor1 = '37BDED';
App.pinColor2 = 'AA0774';
App.pinImage1 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=home|" + App.pinColor1,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
App.pinImage2 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=books|" + App.pinColor2,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
App.pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
And then where you create the marker (along with your other options):
App.marker = new google.maps.Marker(
{
icon: App.pinImage1,
shadow: App.pinShadow,
});
It seems there are two good possibilites. One is to use gmaps.js (http://hpneo.github.io/gmaps/examples/static_markers.html) which lets you specify a color like so (in the third of the three markers added below):
url = GMaps.staticMapURL({
size: [610, 300],
lat: -12.043333,
lng: -77.028333,
markers: [
{lat: -12.043333, lng: -77.028333},
{lat: -12.045333, lng: -77.034, size: 'small'},
{lat: -12.045633, lng: -77.022, color: 'blue'}
]
});
and the other is goMaps, which I've already used, which has an icon property you can set to a .png file. The example can be seen here: http://www.pittss.lv/jquery/gomap/examples/marker_multi.php
using this sort of code:
$(function() {
$("#map").goMap({
markers: [{
latitude: 56.948813,
longitude: 24.704004,
title: 'marker title 1'
},{
address: 'Mokelumne Hill, California, USA',
title: 'marker title 1'
},{
latitude: 55.548813,
longitude: 23.204004,
draggable: true,
icon: '../img/drag.png',
html: {
content: 'drag me!',
popup:true
}
}],
icon: '../img/apartment.png'
});
});
Now I have a separate question, though, regarding how to use a spriteful of pushpin images (How can I use a sprite to specify the pushpin png I want to use in a map?)
I show on a Google map (V3) markers. So that the icons be loaded faster, all the icons are stored in one sprite.
I notice that the icons are sometimes cropped (at the bottom or / and on the right edge is missing a 1 pixel wide border). Interestingly, you can zoom the map, and then the problem disappears. Is this a Google bug or am I doing something wrong. The problem occurs with Firefox, Chrome and IE.
Has anyone had a similar experience or a solution for the problem?
I made a reduced example of the problem. This example can also be accessed online:
http://www.gps-tracks.com/MarkerIconSpriteProblem.aspx
var markerIcon = new google.maps.MarkerImage(
"pictures/NetzCats/C03-MapSpritesS03.png",
new google.maps.Size(20, 16),
new google.maps.Point(140, 1600),
new google.maps.Point(10, 8)
//new google.maps.Size(20, 16)
);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!',
icon: markerIcon
});
You're using v3.10
http://jsfiddle.net/skdz6/
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"
With version 3.9 everything is OK http://jsfiddle.net/skdz6/1/
src="https://maps.googleapis.com/maps/api/js?v=3.9&sensor=false"
Someone who knows to get it working in v3.10?
since version 3.11 of the google maps API, the Icon object replaces MarkerImage. Icon supports the same parameters as MarkerImage.
The properties of the marker are a bit more clearly defined since version. For me this worked much better.
An example could look like this:
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
for further information check this site: https://developers.google.com/maps/documentation/javascript/markers
You are scaling your icon down to half its size, so it will inevitably lose either one border or the other, and you're exchanging Size and Point, as well as the order of the properties.
Try this instead:
var markerIcon = new google.maps.MarkerImage(
new google.maps.Point(5, 8), // anchor (POINT)
new google.maps.Point(140, 1600),//<====== origin (POINT)
new google.maps.Size(10, 8), //<======scaledSize (SIZE)
new google.maps.Size(20, 16), //<====== Size (SIZE)
"pictures/NetzCats/C03-MapSpritesS03.png" //URL
);
Documentation here.
I'm trying to let OpenLayers display a KML file that was retrieved from a server.
For some reason this does not work.
Similar questions have been asked, but I could not find a working example.
What I did was improve one of the examples in the OpenLayers distribution: kml-track.js
I improved it with what I found. This is what it looks like. I feel like I'm missing something obvious.
Any pointers are welcome
var map ;
function init() {
var mercator = new OpenLayers.Projection("EPSG:900913");
var geographic = new OpenLayers.Projection("EPSG:4326");
//note that I have host equal to location// //Math.Random will stop caching//
var mykmlurl = 'http://myserver/kml-track.kml';
map = new OpenLayers.Map({
div: "map",
projection: mercator,
layers: [
new OpenLayers.Layer.OSM(),
//Defiine your KML layer//
new OpenLayers.Layer.Vector("This Is My KML Layer", {
//Set your projection and strategies//
projection: geographic,
strategies: [new OpenLayers.Strategy.Fixed()],
//set the protocol with a url//
protocol: new OpenLayers.Protocol.HTTP({
//set the url to your variable//
url: mykmlurl,
//format this layer as KML//
format: new OpenLayers.Format.KML({
//maxDepth is how deep it will follow network links//
maxDepth: 1,
//extract styles from the KML Layer//
extractStyles: true,
//extract attributes from the KML Layer//
extractAttributes: true
})
}),
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
graphicName: "circle",
pointRadius: 2,
fillOpacity: 0.5,
fillColor: "#ffcc66",
strokeColor: "#666633",
strokeWidth: 1
})
})
})
],
center: new OpenLayers.LonLat(-93.2735, 44.8349).transform(geographic, mercator),
zoom: 8
});
//function called// //timer// //layer to refresh//
window.setInterval(UpdateKmlLayer, 5000, MyKmlLayer);
}
function UpdateKmlLayer(layer) {
//setting loaded to false unloads the layer//
layer.loaded = false;
//setting visibility to true forces a reload of the layer//
layer.setVisibility(true);
//the refresh will force it to get the new KML data//
layer.refresh({ force: true, params: { 'key': Math.random()} });
}
This is an example of how to display a KML layer in OpenLayers which might help you:
http://openlayers.org/dev/examples/kml-layer.html
Are you getting any errors when opening your page - or does it run ok but nothing appear? If you're not getting any errors then it might indicate an issue with how your projections are set up (i.e. your features might not appear where you expect them to)
I am trying to change the KML placemark icons of a KML overlay in a sample Maps application that I am working on.
Here's the sample code -
function seekml() {
var myLatlng = new google.maps.LatLng(40.65, -73.95);
var myOptions = {
zoom: 14,
mapTypeControl: true,
center: myLatlng,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_RIGHT
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
url_end = "?nocache=" + (new Date()).valueOf(); //For No KML Caching
myKML = "http://kmlscribe.googlepages.com/SamplesInMaps.kml" + url_end
gMap = new google.maps.Map(document.getElementById("map"), myOptions);
var ctaLayer = new google.maps.KmlLayer(myKML,{suppressInfoWindows: true});
ctaLayer.setMap(gMap);
google.maps.event.addListener(ctaLayer, 'click', function(event) {
this.setIcon(gYellowIcon);
});
}
gYellowIcon has been defined in my code before -
var gYellowIcon = new google.maps.MarkerImage(
"image url",
new google.maps.Size(31, 31),
new google.maps.Point(0, 0),
new google.maps.Point(6, 20));
I want to change the KML overlay placemarks, when the user clicks on any of the placemarks shown on the KML overlay. The above code doesn't work.
I'm currently working on the exact same thing and, in my case, I could directly edit the KML file. If you have access to it and can edit it, here's what I did:
1) Right under <document> tag, paste something like this:
<Style id="desired_id">
<IconStyle>
<Icon>
<href>http://www.yourwebsite.com/your_preferred_icon.png</href>
<scale>1.0</scale>
</Icon>
</IconStyle>
</Style>
The scale parameter is not supported in Google Maps at the moment. Here you can check all supported elements of KML in Google Maps:
http://code.google.com/intl/en-EN/apis/kml/documentation/kmlelementsinmaps.html
And here you've got some info about compatibility between KML and GMaps:
http://code.google.com/intl/en-EN/apis/kml/documentation/mapsSupport.html
2) Once you've defined you're style, you can refer to it on each Placemark item by adding the following to it:
<styleUrl>#desired_id</styleUrl>
Now, all your placemarks should display showing your custom icon.
Hope it helps.
EDIT: Sorry I didn't see the on click part. This isn't quite what you need then. I'll leave it in case it helps someone else. Sorry for that.