i want drawing like google map 'DrawingManager',
It looks like：drawing-control
var venuesProvider = new H.venues.Provider() // property 'venues' does not exist"#here/maps-api-for-javascript": "^1.30.9"
venuesService.loadVenue(VENUE_ID).then(venue => {`
venuesProvider.addVenue(venue);
venuesProvider.setActiveVenue(venue);
var drawingControl = new H.venues.ui.DrawingControl(venue);
ui.addControl('drawing-control', drawingControl);
});
please use H.venues.ui.DrawingControl, This is the default drawing control component for venues. It will automatically track active venue :
H.venues.ui.DrawingControl
Example:
var venuesProvider = new H.venues.Provider()
venuesService.loadVenue(VENUE_ID).then(venue => {
venuesProvider.addVenue(venue);
venuesProvider.setActiveVenue(venue);
var drawingControl = new H.venues.ui.DrawingControl(venue);
ui.addControl('drawing-control', drawingControl);
});
link : https://developer.here.com/documentation/maps/3.1.30.7/api_reference/H.venues.ui.DrawingControl.html
Related
I am trying to iterate through GeoJSON map.data using a forEach. I want to return the position (LatLng) of each feature so I can add it to my markers array based on a feature property. Here's my attempt:
allMarkers = [];
jQuery.getJSON('json.php', function(data){
points = map.data.addGeoJson(data);
});
var eid = 30;
map.data.forEach(function(feature){
if(feature.getProperty('eid') === eid){
LatLng = feature.getGeometry().LatLng; //not sure how to get LatLng
id = feature.getProerty('id');
var marker = new google.maps.Marker({
position: LatLng,
map: map,
draggable: true,
id: id,
icon: imageActive,
});
allMarkers[id] = marker;
map.data.remove(feature);
}
});
I want to create a marker for the ones I want and remove those from the map.data and keep the remaining map.data for reference.
Any tips/suggestions are always appreciated.
It turns out that all I needed to change was "feature.getGeometry().latLng" to "feature.getGeometry().get()" like what was mentioned in the comments by #geocodezip.
I had tried "feature.get()" and that obviously didn't make sense. Not sure why I had the oversight. So what was obviously needed was:
LatLng = feature.getGeometry().get();
Thanks for the help.
I am using Markerclustererplus with Google Maps API v3 to ease the display of markers on the screen.
The problem is that I will have several markers in the exact same place (and it should be that way) and I would like to, when clicking on a cluster, to display an info window containing all the markers that were clustered.
I've tried several code and similar questions here in StackOverflow, unfortunately I do not master JS and couldn't solve this.
Markers are pushed into an array with some data:
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : marker_image
});
map.markers.push(marker);
When I click an isolated marker, the info window appears ok with a title and an image of that marker:
var infowindow = new google.maps.InfoWindow({
content : $marker.attr('data-title') + '<img width="50" src="' + $marker.attr('data-image') + '">'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
What I would like to happen, is that when clicker a cluster, an info window would open with all of the markers it contains displayed with their corresponding title and image (like, reversing the clustering operation).
Thank you for the help.
Managed to solve this, thanks to the example provided in here.
If anyone is interested, here is how I've done:
First, I've added the markers to the map getting data attributes coming from several custom fields from Wordpress custom posts:
function add_marker( $marker, map ) {
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
var marker_image = $marker.attr('data-marker');
var marker_name = $marker.attr('data-title');
var marker_userpicture = $marker.attr('data-image');
var marker = new google.maps.Marker({
position : latlng,
map : map,
icon : marker_image,
name : marker_name,
userpicture : marker_userpicture
});
map.markers.push(marker);
Created the MarkerCluster:
var markerCluster = new MarkerClusterer(map, map.markers, mcOptions);
Added a click event listener that got the markers from the cluster, their data, created the info window content from that data and finally opened the info window:
google.maps.event.addListener(markerCluster, 'click', function(cluster){
var content ='';
var clickedMarkers = cluster.getMarkers();
for (var i = 0; i < clickedMarkers.length; i++) {
if(i==0) {
var var_pos = clickedMarkers[i];
}
var clickedMarkersNames = clickedMarkers[i].name;
var clickedMarkersPicture = clickedMarkers[i].userpicture;
content +=clickedMarkersNames;
content +=clickedMarkersPicture;
}
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(content);
infowindow.open(map,var_pos);
});
My site consists of a Leaflet map with the leaflet.markerclusters plugin. I am also using Flowplayer to play a video that opens in a JQuery Tools overlay using the selector id "#video1".
Currently, when I click on any marker on the map it fires my test video in an overlay. My goal is to create a click event unique to each individual marker in the cluster. Eventually, I would like every marker to have a click event that fires a video unique to that marker.
I am a beginner, and have been doing okay using these well documented libraries up until now. However, I don't have the skills to bridge this current gap. Would someone please give me a push in the right direction? Below is a link to my JS Fiddle. My issue begins on JavaScript line 2098.
var markers = new L.MarkerClusterGroup();
var addressPoints = [
[40.634902, -73.965054, "Video1"],
[40.660897, -73.961082, "Video2"],
[40.693353, -73.970413, "Video3"],
[40.693289, -73.966289, "Video4"],
[40.68973, -73.971007, "Video5"],
[40.718423, -73.957428, "Video6"],
[40.71817, -73.956918, "Video7"],
[40.681427, -73.993959, "Video8"]
];
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
//assign video div ID to overlay
$('#video1').overlay({
load: false,
top: "center",
left: "center"
});
//bind marker click event to overylay
markers.on('click', function () {
$("#video1").data("overlay").load();
});
Thank you,
Joey
http://jsfiddle.net/Joey84/nM458/26/
You are headed in the right direction with the markers.on("click"... function. You just need to make a few edits. Just as you added the event listener to the entire "markers" layer, you can add it to individual markers in your for loop.
...
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), {
title: title
});
if (title=="Video1") {
marker.on('click', function () {
$("#video1").data("overlay").load();
});
}
marker.bindPopup(title);
markers.addLayer(marker);
}
...
Likewise - and probably the better solution - you can access details about the marker you clicked in the on("click"... you are currently using by passing a variable to the function. This would be useful if you have multiple videos and don't want to check with an if statement when creating markers.
markers.on('click', function (d) {
// Grab marker title and make it look like an ID
var marker_title = "#" + d.layer.options.title.toLowerCase();
// Make sure the jQuery object exists
if ( $(marker_title) ){
// Call up the video.
$(marker_title).data("overlay").load();
}
});
Note that I used toLowerCase() because your data has the title capitalized and the video id is all lowercase.
Here it is in action:
http://jsfiddle.net/nM458/44/
My Google maps API map zooms put to show all the markers added after a google places search. On a mobile map this can take a bit to load and as this app for cyclists I prefer to only show the results within the viewport. Most research I read indicates it is not possible to only return results within the view port. Is it possible for me to just keep the map bounds from changing after the markers are added? It would be great if it would just show me the markers added to the current bounds unless there is only one marker returned, then it should zoom to that marker. So searching for something general like pizza will show many pizza places in the current viewport without panning or zooming. Searching for a specific address will zoom to that marker even if it is outside the viewport.
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
var bounds = map.getBounds();
searchBox.setBounds(bounds);
var markers = [];
service = new google.maps.places.PlacesService(map);
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
// alert("getPlaces returns "+places.length+" places");
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
gmarkers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var place = places[i];
createMarker(place);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
// if (markers.length == 1) map.setZoom(17);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});
ib = new InfoBox({});
The answer to your question:
it possible for me to just keep the map bounds from changing after the markers are added?
is yes. And as you say, involves removing the map.fitBounds.
To get the map to center and zoom on a single address, either use the geocoder for that (implement it separately) or check the number of results, if it is one, center the map on the result and if there is a suggested viewport in the result, use that to center and zoom the map [with map.fitBounds(place.geometry.viewport) I think].
I created a custom XML structure for my Map Points. The structure looks like the code below. I'm wanting to read the points in and put them on the map accordingly with a popup window when clicked and a specific marker icon. I would appreciate any help.
MapPoints.xml
<MapPoints>
<MapPoint PointID="1">
<LocationName></LocationName>
<LocationAddress></LocationAddress>
<LocationURL></LocationURL>
<LocationExt></LocationExt>
<LocationFax></LocationFax>
<LocationLat></LocationLat>
<LocationLong></LocationLong>
<LocationMarker></LocationMarker>
</MapPoint>
<MapPoint PointID="2">
<LocationName></LocationName>
<LocationAddress></LocationAddress>
<LocationURL></LocationURL>
<LocationExt></LocationExt>
<LocationFax></LocationFax>
<LocationLat></LocationLat>
<LocationLong></LocationLong>
<LocationMarker></LocationMarker>
</MapPoint>
<MapPoint PointID="3">
<LocationName></LocationName>
<LocationAddress></LocationAddress>
<LocationURL></LocationURL>
<LocationExt></LocationExt>
<LocationFax></LocationFax>
<LocationLat></LocationLat>
<LocationLong></LocationLong>
<LocationMarker></LocationMarker>
</MapPoint>
<MapPoint PointID="4">
<LocationName></LocationName>
<LocationAddress></LocationAddress>
<LocationURL></LocationURL>
<LocationExt></LocationExt>
<LocationFax></LocationFax>
<LocationLat></LocationLat>
<LocationLong></LocationLong>
<LocationMarker></LocationMarker>
</MapPoint>
</MapPoints>
There are lots of examples that parse xml in the "Mike Williams Google Maps API v2 tutorial" format using attributes, here is one.
To use your "custom" format, you will need to replace this line (to look for "MapPoint" rather than "marker"):
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
and these lines:
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
With code that parses the element content out of your xml.
To get the element content you will need to do something like:
var lat = parseFloat(nodeValue(markers[i].getElementsByTagName("LocationLat")[0]));
Where nodeValue (borrowed from geoxml3) is:
//nodeValue: Extract the text value of a DOM node, with leading and trailing whitespace trimmed
geoXML3.nodeValue = function(node) {
var retStr="";
if (!node) {
return '';
}
if(node.nodeType==3||node.nodeType==4||node.nodeType==2){
retStr+=node.nodeValue;
}else if(node.nodeType==1||node.nodeType==9||node.nodeType==11){
for(var i=0;i<node.childNodes.length;++i){
retStr+=arguments.callee(node.childNodes[i]);
}
}
return retStr;
};
Use jquery. In the head of your html doc, put this line:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
Now use a jQuery ajax call to the local XML file.
//pulls in the xml
$.ajax({
type: "GET",
url: "MapPoints.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('MapPoint').each(function(){
var lat = $.trim(this.LocationLat);
var lng = $.trim(this.LocationLng);
//use the same method to extract your other data
var mappoint = new google.maps.LatLng(lng,lat);
//now create the marker and set it to your map
var marker = new google.maps.Marker({
position:mappoint,
map:map,
title:'Your Marker Title',
icon:null
});
});
}
});