I am trying to display a custom marker on the map in App maker but unfortunately, I am unable to do so,
previously I was able to achieve this simply by
var marker = new google.maps.Marker({
position:{lat:, lng:},
map:map,
icon: url
});
please assist
If you use a Google Map widget, you can set those properties like so:
var map = app.pages.GmapCanvase.descendants.MapDiv;
map.mapType = 'roadmap';
map.zoom = 16;
map.latitude = -33.91722;
map.longitude = 151.23064;
var marker = map.getAddressMarkerJs();
marker.setIcon(url);
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/
I'm using the Google Maps API v3 to generate some minimaps. I have one custom marker in a small map with controls hidden. This works great. Now, I'd like to add a link so that clicking this marker will open the full Google Maps with this location selected. Seems obvious.
I'm creating a marker like this.
var pin = new google.maps.LatLng(myLat,myLong);
var marker = new google.maps.Marker({
position: pin,
map: map,
title:"Hello World"
});
This seems like it should be obvious, what am I missing? Do I need to construct my link and assign it myself?
This should work (not tested):
var pin = new google.maps.LatLng(myLat,myLong);
var marker = new google.maps.Marker({
position: pin,
map: map,
title:"Hello World"
});
google.maps.addListener(marker, "click", function() {
window.location = "https://maps.google.com/maps?ll="+pin.toUrlValue;
});
Working example (built on an existing example, not from the above code)
Ended up finding the answer thusly:
google.maps.event.addListener(marker, 'click', function() {
window.open("https://maps.google.com/maps?ll="+pin.toUrlValue(),'_blank');
});
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].