I load data for my Google Maps v3 with GeoJSON:
that.map = new google.maps.Map($('#map')[0], mapOptions);
that.map.data.loadGeoJson('http://localhost/geoserver/...');
Now, at some point on some user event I need to get one marker and paint it blue.
I can set different color with setIcon.
My idea is to get all features, then iterate through them, find the right feature (based on UNIQUE feature data field) and find marker behind that feature and change icon. I found some approaches that store all markers in array, but don't know why I need another array. Computer resources are important and I don't want to duplicate things.
I need help with, how to get features and how to get Marker object associated with selected feature. If there is a better way to do it, please...
UPDATE
I found this:
var feature = this.map.data.getFeatureById(ID);
I just need to get feature Marker. How? Doesn't look that Feature class has method for that?
There is no method/property that gives you access to the shape(marker,polygon,etc.) that has been created by the API.
To set a new icon-property for a particular feature use overrideStyle:
map.data.overrideStyle(feature, {icon: newIconSettings});
Another option is:
that.map.data.setStyle(function(feature)
{
var color = 'red';
if (feature.getProperty('color'))
{
color = feature.getProperty('color');
}
return ({ // #type {google.maps.Data.StyleOptions}
icon: 'http://maps.google.com/mapfiles/ms/icons/' + color + '-dot.png',
});
});
But it is not as good as Dr. Molle solution, because it needs to iterate through entire features set. I found it on google api documentation (look for title Change Appearance Dynamically).
Related
I need a googlemap with clusters, popup and list where you can click on.
Hoping to find a simple solution which I can easily add markers and have a marker list which points to the marker on the map.
I have successfully used markercluster.js
Just load all your markers into a json (in my example they are in the variable locations), then load them:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
return marker;
});
If you look at the example code, it will show you how easy it is.
The Google Maps JS API documentation is as clear as it comes.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I don't think there's an off-the-shelf solution that looks exactly like your example. Getting that list is going to require some HTML work to position/render the module, and Javascript/DOM integration to sync it with the map. Some rudimentary front-end development is involved and if that's not something you want to tackle, perhaps you could just make a custom Google Map and link to it.
https://www.google.com/maps/about/mymaps/
I'm new to Google Maps API, and have been looking for ways to customize the markers. The API provided only allows me to change icons but what I actually need is to pass HTML content to the marker. I want to pass some data e.g.numbers to the marker, and when user clicks the marker, more details will show inside infoWindow. (something like this website)
At first, I thought it would be something like Instagram Photo Map, you have a summary of photos within a region. But then I realize that's more like a markerClusterer which simply counts the total number of markers within the range (correct me if I'm wrong).
I still couldn't find any way to display customized data on the marker. Is there any plugin I can use if no default API available?
P.S. first time posting a question, hope it's clear! highly appreciate your help!!!!
Basically what you see on the linked map are not real google.maps.Markers, you see Custom Overlays. With a custom overlay you may draw any HTML-content on the map, e.g. these labels.
You may either use the build-in methods to draw these overlays, or use a library like infobox
You can customise markers using styledmarker library. This library is used to create Markers that can be styled in different ways, such as changing the color or shape, or adding text labels. Below is an example of how to use this library with XML.
for (var i = 0; i < markers.length; i++) {
var text = markers[i].getAttribute("text");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var styleMaker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:text}),position:myLatLng,map:map});
}
I have a DEMO using this with a database of 2 tables state centroids and cities in USA using XML . The marker shows the state and number of cities in state.
I have many different KML layers on a Google Map (v3). Random colors of markers were assigned to each set of markers. I would like to be able to control this, however.
So far, this is what I have:
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var kmlLayerOptions = { preserveViewport: true, suppressInfoWindows: true };
var Layer1 = new google.maps.KmlLayer('http://myurl.com/1.xml', kmlLayerOptions);
Layer1.setMap(map);
var Layer2 = new google.maps.KmlLayer('http://myurl.com/2.xml', kmlLayerOptions);
Layer2.setMap(map);
I need to be able to say I want Layer 1 to use blue markers and layer 2 to use red markers, but I can't seem to figure this out.
From what I can tell, there is no way to do this with the kmlLayerOptions, which is where it would seem like it would happen, so I don't see where else I could logically make this change other than directly on the layer object.
You can't change it with KmlLayer (at least currently, you could create an Enhancement request to add the functionality).
You can do it with FusionTablesLayers (import your KML into FusionTables, then use either the User Interface to set the icons or dynamic styling in the Google Maps API v3 (assuming you need less than 5 different icons, and the ones you want are available in FusionTables).
A final option would be to edit the existing KML to use the icons you want.
The KmlLayer renders according to the styling in the KML document itself, and you cannot override this in any layer options.
If you don't want to modify the KML itself, you could use a third party library such as http://code.google.com/p/geoxml3/ to render the KML on the clientside rather than having Google's servers render it, and this would give you the ability to override the rendering defaults.
I have multiple addresses on the same street with the same house number, but with different apartment numbers. Google Maps Geocoding Service (v2) doesn't go down to apartment level accuracy for many addresses and just returned me the exact same geocode coordinates for them.
So the problem is that when I go to display them, only one pushpin shows up no matter how much you zoom in. And my question is; what is a good way to render multiple pushpins at the exact same house address? I've seen how craigslist.org creates a spiral out of the pushpins on their new map feature, but was wondering what my other options are as that seems like a workaround at best.
Ideas?
I solved this using Google's dynamic chart icons which allow you to put a number in the pin identifying that there are multiple markers on this exact some point. Basically, you call their "chart" url with some query params and they give you back your numbered icon which you can then place/set in the existing marker you have on that spot.
var markerImage = createMarkerImage(numDuplicates + 1);
existingMarker.setIcon(markerImage);
function createMarkerImage(text)
{
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + text + "|FF8985|000000",
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
return pinImage;
}
NOTE: This solution uses a deprecated google API with no end date posted.
"Important: The Image Charts portion of Google Chart Tools has been
officially deprecated as of April 20, 2012. It will continue to work
as per our deprecation policy."
UPDATE:
I have moved away from the above solution since it's deprecated (and has performance impact for many markers) in leiu of the same end effect of a numbered marker, but using a path of coordinates defining polygon in the shape of a marker along with a .png for the marker shadow. Only reason I used my own custom marker is because I needed to create individual markers, each with a unique color (and possibly an embedded number), which the vanilla markers don't support.
I'm absolute newbie as for Google Map / Yahoo Map. I would like to know if it is technically possible to ask to show any city in any country DYNAMICALLY (I mean by passing parameters) and then to show some pictures OVER the map near the city ?
Thanks.
There's a multitude of ways you could accomplish this, some prettier than others.
You could use GInfoWindow to display a popup window with pictures in it at any location.
You could use one of the handy libraries offered here http://code.google.com/p/gmaps-utility-library-dev/ to assist you in displaying those images.
What I would recommend, however, is using http://econym.org.uk/gmap/ewindows.htm to create a window that is similar to GInfoWindow but that is styled by you. Just style the window so that it appears to simply be an overlaid picture.
You could choose to fool around with z-index's and manual positioning with a JavaScript library like jQuery.
Also, to answer the beginning of your question yes you can refocus the map anywhere using GMap's .setCenter() method. Documentation of setCenter(), GInfoWindow and much more available at http://code.google.com/apis/maps/documentation/reference.html
I just started learning this myself.
Here is a good link to get started:
http://code.google.com/apis/maps/
On your second question,
show some pictures OVER the map near
the city?
I like #andykram's response above, but I've implemented this previously using the Panoramio layer available for the Maps API. It can get a bit crowded but its an interface people are used to and because it is so simple to include it in a map, it just be the solution for you this time.
Just add the following to your map initialisation function.
var myLayer = new GLayer("com.panoramio.all");
map.addOverlay(myLayer);
As far as dynamically showing any city in the world in a Google Map, the solution is easily implemented - you need to geocode the name of the city. This can be done by triggering a function on an event like onclick.
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (point) {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
If you hit a hurdle, try this first - http://econym.org.uk/gmap/ - possibly the best resource for the GMaps API on the web.
GeoExt is a nice framework if you work with maps in general. You can access other kinds of maps too (OSM, GeoServer).