Google Map Marker with custom numbering - javascript

I have a Google Maps marker function that successfully creates markers on a map like this:
// A function to create the marker and set up the event window
function createMarker(point,html) {
var marker = new GMarker(point,{title:html});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Here is a tinyurl of the exiting code: http://tinyurl.com/b8f9b4l
Using this solution: Google maps: place number in marker?
I've updated this line of code but it is not numbering. What am I doing wrong?
var marker = new GMarker(point,{title:html,icon:'icon: \'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ (position) +'|FF776B|000000',});

The icon property just needs to be the url. You don't need the extra "icon:", and you should drop the extra comma at the end (IE seems to throw an exception when it finds a dangling comma). Also, the parenthesis you don't need - but probably aren't hurting anything.
{
title:html,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + position +'|FF776B|000000'
}
I see where you got the idea. Idk why s/he got a point for that. The extra "icon:" messes it up.
Try this as a test, it should make sure you don't have any problems with the variables inside the url.
{
title:html,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=4|FF776B|000000'
}

Related

Google Maps marker click listener

I need to add click event to Google Map markers, I'm using cordova in my app. Any way recommended in the documentation is not working... unless I make the marker draggable (then it works like gold) and I can't do that. I found that it was an issue a long, long time ago in 2011...
I think something had to be done with that since 2011. Do you have any idea?
Working piece of code below:
var position = new google.maps.LatLng(coords.lat, coords.lng);
var markerOptions = angular.extend({
map: map,
position: position,
title: name,
draggable: true
}, DrawingOptions.marker);
var googleMarker = new google.maps.Marker(markerOptions);
var marker = {
Id: id,
Type: type,
marker: googleMarker,
circle: new google.maps.Circle(circleOptions),
};
marker.marker.addListener('click', function () {
addInfoModal();
});
I also tried to make a function adding listener, but it won't work. I was also thinking about not-so-graceful solution - making marker draggable, but actually preventing action while dragging, but this isn't working and it looks bad in code.
Have you heard of something helpful in this case?
Seem your function is not right.
try without function simply adding the listener this way :
google.maps.event.addListener(googleMarker, 'click', function (event) {
alert('click');
});

Google Maps API v3 UNIQUE marker JS

I'm trying to have a unique marker on a simple javascript web API, no jQuery.
I first tried to delete the previous marker every time I click on the map, with
marker.setMap(null);
just before creating the new one, but it blocks the new one, nothing appears on the screen.
I can easily delete the markers with a button or other event, but is there a way to do it automatically, and have only one marker on the map (with draggable: true to move it, maybe dblClick to delete it) ?
Marker creation triggered by usual
google.maps.event.addListener(map, "click", function(event) {...
var marker = new google.maps.Marker({...
The interface is used to define a single location so I don't want more than one marker on the screen; coordinates are then saved in a database.
When you add the marker by using the var-keyword the variable will not be accessible later, the call of setMap fails(and stops the further script-execution) because of the undefined variable.
Example using a single marker(marker will be stored as property of the map):
google.maps.event.addListener(map, "click", function(event) {
//closure for the map
var that=this;
//only create a single marker
if(!this.marker){
var input = document.getElementById("location_name");
this.marker = new google.maps.Marker({draggable:true,title:input.value});
google.maps.event.addListener(this.marker,'dblclick',function(){
this.setMap(null);
});
//update title
google.maps.event
.addDomListener(input,
'change',
function(){
that.marker.setTitle(this.value);
}
);
}
//update position
this.marker.setOptions({map : this,
position : event.latLng
});
});

Javascript argument parameters and google maps

I'm introducing myself to Google Maps API, and to JavaScript as well.
I already have set my map on my website, and now I'm trying to dynamically set multiple markers on the same map.
For that, I wrote this function:
function teste(lat,long){
alert (lat);
alert (long);
//var companyPos3 = new google.maps.LatLng(41.545308,-8.421782);
var companyPos3 = new google.maps.LatLng(lat,long);
var companyMarker3 = new google.maps.Marker({
position: companyPos3,
map: map,
// icon: companyLogo,
title:"Mar!!!" });
//}
...
}
And my problem resides right here. I can't set the google.maps.LatLng with 'lat' and 'long' function parameters. However, the alert dialog messages pop up, showing the values that are from PHP.
I tried also to remove the alert function but the marker didn't show as well.
I'm not sure if it there is a Google Maps API trick, or JavaScript trick.
Oh, and if I set the values as the commented line, it works, but I don't want this solution :).
long is the reserved word in JS. Please check here. So, please try lng instead of long also for setting icon please see here. Try something like
function teste(lat,lng){
alert (lat);
alert (lng);
//var companyPos3 = new google.maps.LatLng(41.545308,-8.421782);
var companyPos3 = new google.maps.LatLng(lat,lng);
var companyMarker3 = new google.maps.Marker({
position: companyPos3,
map: map,
// icon: companyLogo,
title:"Mar!!!" });
//}
...
}

Google Maps API V3 infowindow

While developing this solution, I learned that API V2 was being deprecated. I've since begun work on a version utilizing API V3. This work-in-progress can be found at My New Map. Special thanks are due to David Marland at Hammerspace for accelerating this conversion for me.
I'm down to 3 remaining issues..the first of which I will address in this post.
I am unable to trigger the infowindows I have defined:
google.maps.event.addListener(polyline, 'click', function(event) {
if (polyline.Contains(event.latLng)) {
infowindowInside.open(map,polyline);
} else {
infowindowOutside.open(map,polyline);
}
});
I am attaching them to a polygon..not a marker. The polygon is written:
var path = [
new google.maps.LatLng(35.950079, -84.104977),
new google.maps.LatLng(35.950774, -84.049702),
new google.maps.LatLng(35.946883, -84.047813),
new google.maps.LatLng(35.945354, -84.045067),
new google.maps.LatLng(35.940907, -84.042149),
new google.maps.LatLng(35.930483, -84.037857),
new google.maps.LatLng(35.939656, -84.037857),
new google.maps.LatLng(35.928120, -84.076309),
new google.maps.LatLng(35.938822, -84.066868),
new google.maps.LatLng(35.950079, -84.104977)];
var polyline = new google.maps.Polygon({path:path, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2, clickable:false});
polyline.setMap(map);
I appreciate any guidance you can provide.
Thank you.
** UPDATED *****
I've now modified the code to:
google.maps.event.addListener(polyline, 'click', function(event) {
if (polyline.ContainsLocation(event.latLng, polyline)) {
window.alert('inside');//infowindowInside.open(map,polyline);
} else {
window.alert('outside');//infowindowOutside.open(map,polyline);
}
});
However..still no trigger.
Possibly because Polygon doesn't have a "contains" function. You should look at using the Google Maps API Geometry Library, which has a containsLocation function.
Google maps api v3 does not allow you to add infowindows to polylines or polygons. The solution around this is to grab the lat/lng coordinates of the mouseclick and attach the info window (where the user clicked his/her mouse) to the map like:
google.maps.event.addListener(polyline, 'click', function(event) {
if (polyline.Contains(event.latLng)) {
infowindowInside.open(map);
} else {
infowindowOutside.open(map);
}
});
(note how there isn't a second argument in the .open() method)
otherwise you can figure out the lat/lng of either the center of your polygon or one of its corners and attach the infowindow there (but to the map)
that will allow you to display your infowindow while making it appear as tho it is attached to the polygon.
Edit: Also -- as mano marks had stated about .Contains -- I am not sure if that method exists or not either, so that block of code you have may still not work even after removing the second argument from the .open() method. you may have to take a different approach to your logic if that's the case, but attaching the marker to the map instead of your polygon or polyline will solve your main issue.

Google Maps API--Can't get info window data to load properly

I have this code that generates markets I want to be clickable with a pop up info window.
for (i = 0; i < marker_array.length; i++) {
var point = new GLatLng(marker_array[i][0], marker_array[i][1]);
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html_data);
});
map.addOverlay(marker);
}
The problem is that only one market ends up clickable. No matter which one gets clicked, an info window with the one clickable marker's data pops up over that one clickable marker. All of the markers load and are in the correct locations, so the problem is only with getting the pop up window data to appear for each one.
I've checked out the section about "unrolling" the marker function here and it seems like that's probably where I'm going wrong, but I have not been able to get this to work through testing the changes they suggest.
I believe your problem is that the variable html_data is the same for all iterations of this loop. You should update that variable each go-through in the loop for the values to be different.
I'm not quite sure if I follow, but are you saying that all popups have the same data in them?
I think that this is the problem, and that's because the way the event listeners work. When the click function happens it evaluates the listener event. So the HTML you're showing is always the same, as the variable is always being re-written to.
I used an array that matches my marker data for my HTML and it works well:
function createMarker(posn, title, icon, i) {
var marker = new GMarker(posn, {title: title, icon: icon, draggable:false});
GEvent.addListener(marker, 'mouseover', function() {
map.closeInfoWindow()
marker.openInfoWindowHtml(infoText[i])
} );
return marker;
}
I found the same case, and i have a solution for this problem. I suggest you to create a custom class extending Marker class. In this custom class, you should make a constructor that have a parameter(s) for your data, and this class should also have its own info window variable that will be called from your main application. For example:
The custom class:
public class StoreSpot extends Marker
{
public var infoWindow:InfoWindowOptions;
public var store_id:String;
public var address:String;
public var name:String;
...
}
The main application:
tempMarker = new StoreSpot(
tempLatlng,
new MarkerOptions({
icon:new spotStore(),
iconAlignment:MarkerOptions.ALIGN_HORIZONTAL_CENTER,
iconOffset:new Point(0,-50)
}),
temp.store_id,
temp.name,
temp.address,
temp.detail
);
This way you can place different info window for different marker. Hope this works for you. Enter code here.

Categories