html marker add additional properties in azure maps - javascript

I am loading all sites of companies as a html markers in azure maps and on click of it, launch a popup that displays site specific information.
The Html marker does not have any property bag, through which i can pass a bunch of site information that i can use in the popup that i intent to display on click of html marker.
azure maps documentation on HtmlMarker: https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.htmlmarkeroptions?view=azure-maps-typescript-latest
Any help?

Simple add a custom property to the html marker and add your data to that. That data will always be with the marker. For example:
var popup = new atlas.Popup();
//Create a HTML marker and add it to the map.
var marker = new atlas.HtmlMarker({
position: [0, 0]
});
//Add your custom property with data
marker.properties = {
title: 'hello world'
};
map.markers.add(marker);
map.events.add('click', marker, function(e){
//Get the clicked marker.
var m = e.target;
//Get custom properties on the marker
var p = m.properties;
popup.setOptions({
content: `<div style="padding:10px;">${p.title}</div>`,
position:m.getOptions().position,
pixelOffset: [0, -18]
});
//Open the popup.
popup.open(map);
});

Related

Overwrite google.map with location

I have a main javascript file which generates a google map inside a div. This div is under many others which contains graphically visible datas needs for... somethgin similar to a dashboard. But on several other subpages I want to dynamically reload the map with unique parameters, but I can't according to the main map is listened on the load event. Not used the google map v3 api so much times so could anyone help me?
The main is generated by:
function mapInitialize() {
var mapOptions = {
zoom: 13,
styles: mapStyle
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', mapInitialize);
In one of my subpage I want to generate a map with specific center, coordinates and a unique marker. So what I basically would do is to cal lagain the whole initialize() with my specific attributes, but it generates itself firstly then the one in main.js overwrite this already generated and wrong one :( How could I manage this easily, according to there are several subpages which should show this kind of unique datas after the page is fully loaded?
Google maps allows you to recenter the map after a map is already initialized:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
title: markerTitle,
map: map,
});
map.panTo(marker.getPosition());
Additionally, what keeps you from reinitializing the map whenever you want? Just because it is registered with an on load listener shouldn't prevent you from making new instances? (I think):
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

Google Maps API v3.0 Saving a reference to a marker

I am using Google Maps API v3.0
The map have MULTIPLE markers (so any examples of using 1 marker isnt what I am after)
Things are going ok so far.. but I am not clear on how you can save a reference to a specific marker when it is clicked? (which I have read as a suggestion few places, but no examples)
There are two separate instances where I would like to have a direct target/reference back to a specific marker to control/change the behavior/image..etc (whatever).
Example of scenario #1:
1.) When I click on a marker, I am currently 'bouncing it' as well as changing its icon to a different image. If I click on a new marker.. I want to target the OLD marker to stop bouncing/revert back to old icon. I have accomplished this by running a loop over my 'marker' array and stop all animations on all markers.. and changing all icons to the old (original) image. It works.. but I would like NOT to have the overhead of running through the loop. Going forward, I would like to change the old marker to a 3rd icon image.. (to show it has been interacted with before).. so I need a way to save/set a reference to a marker once it is clicked.. so I can target it again (directly)
Example of scenario #2:
1.) I have some 'controls' (elements) outside of the map, that I would like to use to interact with the map, as well as specific markers.
ie: Have an image of the marker/entry OUTSIDE of the map.. where a user clicks on it.. and it scrolls/pans the map to that specific marker (as well as changing animation and icon image)
Here is my current click listener:
google.maps.event.addListener(addr[n], 'click', (function(marker, n) {
return function() {
infowindow.setContent(addr[n].title + "<br />" + addr[n].company + "<br />" + addr[n].workphone);
infowindow.open(map, addr[n]);
//increase z-index when marker has focus
addr[n].setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
}
})(marker, n));
Q:
How can I save a DIRECT reference to a marker on the map when it is clicked, to be used in another function and referenced there?
In response to MuffinMan:
Thanks... I'm still not clear though, at least as to how it relates to my project.
I -am- saving things into an array already. (addr[n] from above)
Here is the class method that is building my addr[n] array for me:
public static function GMapMarker($markerId, $memberObject, $addressObject){
$marker = 'var m_'.$memberObject->Id.'_'.$addressObject->AddressNum.' = new google.maps.LatLng('.$addressObject->Lat.','.$addressObject->Lon.');
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: m_'.$memberObject->Id.'_'.$addressObject->AddressNum.',
title:"'.addslashes($memberObject->Full_Name).'",
company:"'.addslashes($memberObject->Company).'",
icon:"marker_gd.php?m=' . $markerId . '",
markerid:"'.$markerId.'",
id:"'.addslashes($memberObject->Id).'",
addressnum:"'.addslashes($addressObject->AddressNum).'",
refid:"m_'.$memberObject->Id.'_'.$addressObject->AddressNum.'",
workphone:"'.addslashes($memberObject->Work_Phone).'",
zIndex: '. (100 - preg_replace('/\D/','', $markerId)) .'
});
addr.push(marker);';
return $marker;
}
I have no way of knowing what order/index in the array that particular marker is. However I do have the unique name given and that markers lat/lon coords....
But I am NOT clear how to use it to target a marker later on?
Here's what I used in my implementation:
var markers = [];
for (var index = 0; index < data.length; index++) {
var latlng = new google.maps.LatLng(data[index].lat, data[index].lng);
var marker = new google.maps.Marker({position: latlng, map: map, title: data[index].label, icon: 'images/dot.gif'});
google.maps.event.addListener(marker, 'click', function() {
markers.push(marker); /* marker saved here for later reference*/
});
}
markers[] is populated with the markers you want for later use. E.g. markers[0].
You can add other listeners that javascript supports to handle other events on the marker, such as dragging and hovering.

Google StreetView location

I am using Google StreetView, and would like to allow placement of markers by the user.
For example, if it's just a Google Map (rather than the StreetView) I can do:
google.maps.event.addListener(map, 'click', recordPosition);
function recordPosition(e) {
var marker = new google.maps.Marker({
position : e.latLng,
map : map,
icon : cafeMarkerImage,
title : 'Centre of the universe ' + numberOfClicks
});
numberOfClicks++;
}
and when the user clicks, the cafeMarkerImage is put under the mouse cursor.
Once these markers are added to the map, switching to StreetView shows them correctly... however, I'd like to add them in StreetView, not map view.
However, in StreetView, the 'click' event is not available.
I want to find the latLng of the center of the "pancake" that is shown in StreetView during mouse motion --- once the user clicks.
Odi's answer gets me some of the way there, but I'm still stuck: The click gets me the CURRENT position of the Street View POV, but then it changes immediately to where I clicked. So if I grab the POV on the click and do the annotation I need there, but user can no longer see it because the view changes.
You can use the StreetViewPanorama layer, which provides you with the appropriate events and data.
I guess what you want is the position_changed event. See this good example of how to use the event and retrieve the according data.
In short:
var start = new google.maps.LatLng(47.500613, 8.724575);
var panoramaOptions = {
position: start,
pov: {
heading: 20,
pitch: 0,
zoom: 1
},
visible: true
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoramaOptions);
google.maps.event.addListener(panorama, 'position_changed', function() {
console.log(panorama.getPosition().toString());
});​

How can I access the objects created by DirectionsRenderer in Google Maps V3

Is there an easy way to get access to the objects/properties of the markers and infowindows created by the DirectionsRenderer? (i.e. the "A" and "B" endpoints of the route)
I'm looking to replace the "A" & "B" markers' infowindows with one that I've created (containing dynamic content) from another "non-route" marker.
I've tried to copy the content from the previous infowindow into the new "route one" like this below, but it doesn't render properly (too many ancestor div & styling constraints).
//infowin is a reference to the infowindow attached to the marker
result.routes[0].legs[0].end_address = MarkersArray[i].infowin.getContent();
Thanks,
E
I try to solve the same problem. I dont't found any method to get the standart start or end icon.
You can disable the icons for the route and set a coustom marker.
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var image = 'beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});

How do I link Google Maps Markers to other elements?

Using the google maps (and JavaScript) I have been able to easily display several markers which each have a nice little info window over them.
//Create map over USA
map = new google.maps.Map2( document.getElementById('map') );
map.setCenter(new GLatLng(38.95940879245423, -100.283203125), 3);
//Create point, then marker, and then add to map
function create_marker(lat, lng, html) {
var marker = new GMarker( new GLatLng(lat,lng));
marker.bindInfoWindow(html);
map.addOverlay(marker);
}
var html = '<div>this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html);
However, I now want to be able to link the "click" of markers to functions which can update other parts of the page as well. For example, I would like to have a sidebar with copies of the marker infowindow content. The same way google maps shows results on the left and markers on the right. I might even want the click of sidebar content to open a given marker infowindow on the map.
The problem is that the GMarker click event only passes the lat/long - and I'm not sure how I can use that to find the matching div or whatever.
How do I get a unique id/handle for each marker?
Assign an id to each marker and its corresponding element in the sidebar. Create an event listener to call that id. Something like this:
var html = '<div>this is my text</div>';
var sideHtml = '<div id="1">this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html, 1);
$("#sidebar").append(sideHtml); // Add the text to the sidebar (jQuery)
//Create point, then marker, and then add to map
function create_marker(lat, lng, html, id) {
var marker = new GMarker( new GLatLng(lat,lng));
marker.bindInfoWindow(html);
map.addOverlay(marker);
GEvent.addListener(marker, 'click', function(latlng) {
var div = document.getElementById(id); //access the sidebar element
// etc...
});
}
See also this question.
For those interested there is a great example of linking dom elements with markers given here. Basically you just create a global JS array that holds a reference to each marker object.

Categories