We Keep Coding

Using google maps JS api, how can I open an infowindow where the user clicks on the map? Is that possible?

Is it possible to open the infowindow right where the user clicks on the map?
Here's what I have right now:
OnClickMap(event) {
const map = this.state.map;
const title = this.props.createNewMarkerTitle;
const marker = {
latLng: {
lat: event.latLng.lat(),
lng: event.latLng.lng()
}
};
const markerOnMap = new google.maps.Marker({
position: marker.latLng,
map: map,
title: title
});
const infowindow = new google.maps.InfoWindow();
const content = document.createElement('div');
ReactDOM.render(this.renderCreateNewMarkerInfoWindow(), content);
infowindow.setContent(content);
markerOnMap.addListener('click', function() {
infowindow.open(map, markerOnMap);
});
}
I'm not sure how I can just click the map, and have the infowindow open on where I clicked. I tried messing around by removing the marker and just having the infowindow open, but that leads to the window opening in the top left since I am not sure how to pass the latLng to it.
Is this possible? Otherwise, how can I set up something where:
click the map ->
creates a marker ->
immediately opens infowindow (instead of having to click the marker to open it)

To open an InfoWindow at the location clicked on the map (without a marker), you need to set the .position property of the InfoWindow (and don't include the optional anchor in the .open call).
map.addListener('click', function(evt) {
var infowindow = new google.maps.InfoWindow();
infowindow.setPosition(evt.latLng);
var content = evt.latLng.toUrlValue(6);
infowindow.setContent(content);
infowindow.open(map);
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.addListener('click', function(evt) {
var infowindow = new google.maps.InfoWindow();
infowindow.setPosition(evt.latLng);
var content = evt.latLng.toUrlValue(6);
infowindow.setContent(content);
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Issue with google.maps.event.trigger(map, "resize")

Thanks for checking it out.. I have an issue with this .js were i am using jquery to resize the map-canvas div. But once it has been resized i need the actual google map to reset its boundaries which i am using google.maps.event.trigger(map, "resize"), here is my code but once it fires the resize of the div, it cannot run the resize map trigger due to it being undefined? here is my .js
// JavaScript Document
// Scripts below in regards to instantiating the google map.
var map;
function initialize() {
var myLatLng = new google.maps.LatLng(-34.1840517,150.7131903);
var mapOptions = {
zoom: 17,
center: myLatLng,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: myLatLng,
map: map,
title: '6 Station Street, Douglas Park, 2569'
});
var contentString = '<div id="mapContent">'+'TESTING'+'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(function() {
$("#expand-map").click(function() {
$("#map-canvas").animate({"height" : "800px"}, 500);
google.maps.event.trigger(map, "resize");
});
});

You have just call the initialize function to draw map again after the map-canvas dimensions changed in animate function callback.
$(function() {
$("#expand-map").click(function() {
$("#map-canvas").animate({"height" : "800px"}, 500,function(){
initialize();
});
});
});
see here:
demo jsfiddle

tooltip content undefined - google map

I added code for tool tip display when hovering the pointers in the google map.It is showing the tool tip but the content is "undefined". How can put the corresponding content related to the pointer into the tool tip box.The code is :
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(29.7,-95.4),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("salon_map"), myOptions);
var locations = [
__newmapdetls__
];
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34));
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3],
tooltip:"testinggg"+i
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1.open(map, this);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow1.close(map, this);
});
var infowindow1 = new google.maps.InfoWindow({
content: "'"+this.tooltip+"'"
});
}
}
Also url is : http://myshopsalon.com/find-a-shop-salon

A couple of things I noticed when looking at your page source:
Your page is loading both jQuery 1.10.1 and 1.7.2. But it isn't using noConflict(). So these two jQuery versions are stepping on each other.
You're also loading three copies of the Maps API: two copies of version 3 and a copy of the deprecated version 2 API.
Now to your question:
Use a closure to save your variables for each iteration of the marker loop. You can do this by simply calling a function in each iteration.
Instead of using this when you call infowindow.open(), use marker. (this and marker may be the same in this context, but use marker for consistency.)
The .close() method of an infowindow does not take any parameters.
Don't set the tooltip property when you create the marker. That may work, but it isn't documented that you can add your own properties in this fashion. Instead, simply use a local variable or parameter for tooltip.
I would create the infowindow before adding the event listeners. This will actually work fine in either order (since the event listeners are asynchronous), but it looks better to see the infowindow created first.
So, change your for loop to:
for (var i = 0; i < locations.length; i++) {
addMarker( locations[i], "testinggg" + i );
}
function addMarker( location, tooltip ) {
var image = new google.maps.MarkerImage(
"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
new google.maps.Size(20, 34),
new google.maps.Point(0, 0),
new google.maps.Point(10, 34)
);
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3]
});
var infowindow = new google.maps.InfoWindow({
content: "'" + tooltip + "'"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
}
That said, you may not like the result you get when you open an infowindow in response to moving the mouse over a marker. What if the marker is near the top of the window? The page will immediately move to make the infowindow fit on the screen, and now the marker won't be under the mouse any more.
You're already setting the title property when you create the marker. This should cause a normal browser tooltip to appear when the mouse is hovered over the marker, and it won't cause the map to move as the infowindow may do. Any reason not to just use that tooltip instead of the infowindow? You could just remove all of the infowindow code, or let the infowindow open on a click as it normally would.

Set the content of the infowindow onmouseover(you may access there the tooltip-property of the specific marker)
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1.setContent(this.tooltip);
infowindow1.open(map, this);
});
the initializing of infowindow1 move to outside the loop and leave the arguments empty.

Use the below code:
var infowindow1 = new google.maps.InfoWindow({
content: "'"+marker.tooltip+"'"
});
EDIETD:
var contentString = "testinggg"+i;
var infowindow1[i] = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: location[0],
zIndex: location[3],
tooltip:"testinggg"+i
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow1[i].open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow1[i].close(map, marker);
});
You can not get the property of marker in the info window. So you need to define the content in other variable.

Custom popup Google map

How to get to do this kind of popup with google map?
Go http://www.flightradar24.com/ and click on an airport and can see that the popup is completely personalized.
So I managed to create popup on google map but now I do not see how this is put a different message for each popup.
And how to customize the popup with css and javascript include inside?
So now I'm here and I want to know if for the moment my script is correct and how to later to reach a popup like Flightradar24 airport?
<script type='text/javascript'> $(function(){function initialize() {
var mapOptions = {
zoom: 4,
disableDefaultUI: true,
center: new google.maps.LatLng(45.35, 4.98),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
addMarkerWithWindow("This is Lemans", new google.maps.LatLng(48.006922, 0.20874), map);
addMarkerWithWindow("This is Paris", new google.maps.LatLng(48.856291, 2.352705), map);
}
function addMarkerWithWindow(name, coordinate, map) {
var popup=$('<div/>', {
content: name
});
var image = 'rss.png';
var marker = new google.maps.Marker({
map: map,
icon: image,
position: coordinate
});
var styles = [
{
featureType: "all",
stylers: [
{ saturation: -15 },
{ lightness: -10 },
]
},
];
map.setOptions({styles: styles});
// jQuery
var popup=$('<div/>', {
'id':'This is Lemans',
'text':'Hello World!'
}).dialog({
'autoOpen':false,
'width': 600,
'height':600,
'resizable':false,
'modal':false,
'title':'Le Mans'
});
google.maps.event.addListener(marker, 'click', function(e) {
console.log(e);
popup.dialog('open');
});}initialize();});//]]> </script>

If you change your addMarkerWithWindow function to use it's arguments in the popup, your code works for me:
function addMarkerWithWindow(name, coordinate, map) {
var image = 'rss.png';
var marker = new google.maps.Marker({
map: map,
// icon: image,
position: coordinate
});
// jQuery
var popup=$('<div/>', {
'id':'This is '+name,
'text':'Hello World!'
}).dialog({
'autoOpen':false,
'width': 600,
'height':600,
'resizable':false,
'modal':false,
'title':name
});
google.maps.event.addListener(marker, 'click', function(e) {
// console.log(e);
popup.dialog('open');
});
}
(console.log doesn't work in IE)

Hi You are looking for something like JSFiddle with custome popup on map click. Its just a quick mockup for you to show how you can do show hide on mouseover event. You probably can put some nice animation and stop event propagation or make it an event on click as well.
The code in you should be looking at is from line 120 to 151
events:{
mouseover: function(marker, event, context){
var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
jQuery(listelement).attr('style','background-color:#ccc');
jQuery(listelement).attr('data-isactive','1');
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(context.data.ht);
jQuery("#customPopup").html(context.data.ht); //This puts html in popup. You can even get html from a jquery template or get it via json if you want.
jQuery("#customPopup").show(500); // This part shows the popup
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data.ht}
}
});
jQuery("#customPopup").html(context.data.ht); //This is when no window is present so we create new window and again full it with html as you wish
jQuery("#customPopup").show(500); //Then show it to the user
}
},
mouseout: function(marker,event,context){
var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
jQuery(listelement).attr('style','background-color:#fff');
jQuery(listelement).attr('data-isactive','0');
var infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.close();
jQuery("#customPopup").html(""); //Hide the html or not. if you do this then html will go away first before hiding it not so good animated effect but you get the point.
jQuery("#customPopup").hide(500); //Take it away from user
}

How do I close an infowindow with Google Maps 3 API?

I've seen the other posts, but they dont have the markers being looped through dynamically like mine. How do I create an event that will close the infowindow when another marker is clicked on using the following code?
$(function(){
var latlng = new google.maps.LatLng(45.522015,-122.683811);
var settings = {
zoom: 10,
center: latlng,
disableDefaultUI:false,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
$.getJSON('api',function(json){
for (var property in json) {
if (json.hasOwnProperty(property)) {
var json_data = json[property];
var the_marker = new google.maps.Marker({
title:json_data.item.headline,
map:map,
clickable:true,
position:new google.maps.LatLng(
parseFloat(json_data.item.geoarray[0].latitude),
parseFloat(json_data.item.geoarray[0].longitude)
)
});
function buildHandler(map, marker, content) {
return function() {
var infowindow = new google.maps.InfoWindow({
content: '<div class="marker"><h1>'+content.headline+'</h1><p>'+content.full_content+'</p></div>'
});
infowindow.open(map, marker);
};
}
new google.maps.event.addListener(the_marker, 'click',buildHandler(map, the_marker, {'headline':json_data.item.headline,'full_content':json_data.item.full_content}));
}
}
});
});

I finally figured it out... no thanks to anyone here... It was actually fairly easy:
First, set up some vars to store the infowindow:
var infowindow;
Then add this to wherever your onClick function is that triggers the other infowindow.open(). Put it above the open though:
if(infowindow) {infowindow.close()}
Inside your loop or however else you are adding markers.
E.g. in full action:
At the very top of my script:
var infowindow;
Inside my loop of adding markers:
function buildHandler(map, marker, content) {
return function() {
if(infowindow) {infowindow.close()}
infowindow = new google.maps.InfoWindow({
content: 'My Content here'
});
infowindow.open(map, marker);
};
}