I may be asking the same question as Similar q, but I'm not sure!
Basically I have code to add markers to a Google map. Then an infowindow displays.
How can I put a form in here that has elements binding to the scope of a module?
Angular is running ok on the rest of the page (I have a simple expressions to test this), but it's not running in the form as {{text}} never changes.
var html =
"<form id=\"markerInput\" ng-controller=\"markerCtrl\">"+
"<input ng-model=\"text\">{{text}}</form>";
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(html);
infowindow.open(map, marker);
});
});
I know this is an old question but I recently come across this problem and had trouble finding relevant info so it can definately help somebody out there, I fixed it using .$apply to read more please visit this link http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
Related
I am working on a project, and they want to look the infowindows like this:
[![enter image description here][1]][1]
How is this possible and which library would you recommend?
In Google maps v3 it is possible by creating custom event listeners and modifying autocentering. Examples can be found here: http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
Several infowindows for one marker (not tested):
var infowindow = new google.maps.InfoWindow();
var infowindow2 = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position:latLng,
map: map
});
google.maps.event.addListener(marker, 'click', function(content){
return function(){
infowindow.setContent(content);
infowindow.open(map, this);
infowindow2.setContent(content+'222');
infowindow2.open(map, this);
}
}(content));
I have trouble with my google map script where the markers on a same location overlapped and not visible to user. I tried to edit my script using OverlappingMarkerSpiderfier available in this link https://github.com/jawj/OverlappingMarkerSpiderfier. But overlapping issue exist.No improvement occured.
The below function binds a popup window with marker.I have edited the function to remove overlapping of markers in the same location using OverlappingMarkerSpiderfier.
function bindInfoWindow(marker, map, infoWindow, contentString)
{
var oms = new OverlappingMarkerSpiderfier(map);
oms.addMarker(marker);
oms.addListener(marker, 'mouseover', function() {
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
$("#tabs").tabs();
});
}
// highlighting a marker
Below is the jsfiddle link of my edited google map.Please show me where iam doing wrong.
http://jsfiddle.net/7AKuX/11/
You create a new oms-instance for each marker, use the same instance for all markers instead:
http://jsfiddle.net/5VFeJ/
Google map developer api provide clustering method to see overlapped markers and its contents. Refer to this link, or else use OverlappingMarkerSpiderfier.
I have some code in the below example that works great - but!
The looping for function doesnt work when it comes to the infowindow. You'll notice that if you click on either map icon the same link "name2" shows up. I need this to loop and change the information correctly eg: "name1" for the first map marker and "name2" for the second.
I'm probably missing something simple!?
http://jsfiddle.net/bTujZ/565/
var infowindow = new google.maps.InfoWindow({ content: marker.url });
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
Thanks
You have to read up on Javascript Closures
Meanwhile, here is your fiddle fixed: http://jsfiddle.net/bTujZ/566/
All you had to do was create a closure inside if your loop using an anonymous (function(){})().
You are using only one infowindow for all markers.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
From your code when marker is clicked, it looks up infowindow in memory, which is the one created at the end of your loop.
Thus, you are seeing all the same infowindow for all markers.
If you want to see different infowindow, instantiate it inside addListenter function. Or, you can set infowindow contents of infowindow inside the addListener function.
I am developing an application which uses google maps api v3 to show markers and infowindows.
Well, I have N markers stored within an array and a global infowindow used to show some information.
The infowindow contents are shown simply by clicking a marker, created in this way:
/* global js stuff */
var g_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var g_current_popup = new google.maps.InfoWindow({ content: "" });
var g_markers = [];
/* create marker function */
function addMarker(p_infowindow_contents)
{
var l_marker = new google.maps.Marker( all the stuff needed );
google.maps.event.addListener(l_marker, 'click', function()
{
g_current_popup.close(); // if already open, it must be closed and reloaded
g_current_popup.setContent(p_infowindow_contents);
g_current_popup.open(g_map, l_marker);
});
g_markers.push(l_marker);
}
Everything works as expected, except for a little graphical glitch: when the infowindow is appearing, I see the infowindow 'tip' positioned at an unknown location for a tenth of a second, then it disappears and I see the correct infowindow.
Look at this screenshot took just before the tip disappears:
Does anyone experienced something like this?
Could it be some CSS issue?
Thanks
It does not look like this is a problem with your code, I think it more likely a browser issue. I was able to validate the same thing looking at the infowindow example that Google provides in Firefox, but not in Chrome:
https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
it seems to happen more visibly when the map has to scroll to fit the infowindow, but I would say that it is not a requirement for it to do so. It is likely just an artifact with the screen taking a few clock cycles to catch up with the DOM.
I am new to Google Maps programming, and I want to :
add a pushpin onclick
get the clicked point location
in addition, I want to code this in javascript(&jquery)
In fact, here is an example of what I mean
http://www.gorissen.info/Pierre/maps/googleMapLocation.php
so, can anyone provide me with information about how I can code it?
Kind regards!
GEvent is Maps API 2 which is deprecated. You should be using Maps API 3 instead (especially if you're starting out 'new' and not having to maintain an old API 2 site). And when you do, something like this should work:
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});