I want to make a google map infowindow.
the infowindow should be editable when some event is fired.
there is a question and answer about google map infowindow editable,
How do I make the info window editable in the Google Maps API?
but, this is about version 2.
any idea how to infowindow editable?
refrence~
this is my addMarket function
this.addMarker = function(location) {
var iconImg = 'signpost.png';
var marker = new google.maps.Marker({
position: location,
map: this.mMap,
icon: iconImg,
});
var infowindow = new google.maps.InfoWindow(
{
maxWidth: '50px',
content: "some text"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(this.mMap, marker);
});
infowindow.open(this.mMap, marker);
this.mMarkerArray.push(marker);
}
Well, you can pass any HTML into the InfoWindow's content property. So the solution for Google Maps v2 that you mentioned, also applies here:
var infowindow = new google.maps.InfoWindow(
{
maxWidth: '50px',
content: '<div contentEditable="true">changeme...</div>'
});
Related
I have a custom Google Maps where marker are populate dynamically and I try to redirect the marker link to the corresponding place details' page on Google Maps. For example, on marker click, I would like to open a new window to this link : https://www.google.com/maps/place/PMBCOM/#46.381949,6.236581,17z/data=!3m1!4b1!4m2!3m1!1s0x478c372f7df47135:0xff206d31a973eded
For now, I am able to redirect to the address, but it does not show the full Google My Business panel like on my previous link. Any ideas ?
Here is my code :
function initMap() {
var myLatlng = new google.maps.LatLng(agence[0], agence[1]);
var map = new google.maps.Map(document.getElementById('maps'), {
center: myLatlng,
zoom:17
});
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.getDetails({
placeId: 'ChIJ71BChS4ujEcRclm9twk3Y04'
}, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
title: place.name,
url: 'https://www.google.com/maps/place/'+place.formatted_address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
window.open(marker.url);
});
}
});
}
google.maps.event.addDomListener(window, 'load', initMap);
Thanks for your help
look this part
url: 'https://www.google.com/maps/place/'+place.formatted_address
google cannot locate this company in this way
change to
url: place.url
I think this is what you want
I've created a marker and added a listener on this marker which opens an info window. My problem is that i can't figure it out how to change the default frame of the infoWindow. is it possible? here is my code:
var markerPosition = new google.maps.LatLng(lat, lng);
var shopMarker = new google.maps.Marker({
position: markerPosition,
map: map,
icon: iconshop,
title: " shop",
draggable: false
});
var content = '<ul class="shopmaplist"> <li>text</li>'
+'<li><span>text</span>text</li>'
+'</ul><ul class="shoplistel">text</ul></br>'
+'<div class="buttonshop"><input type="submit" class="btncontinue" value="text" tabindex="3"></div>';
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(shopMarker,'click', (function(shopMarker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,shopMarker);
};
})(shopMarker,content,infowindow));
In this code what can i do to customize the infoWindow's frame and generally the style?
Edit:
the image below is the result that i want when i click the marker.
You can't change a google.maps.InfoWindow. You can use a "3rd party" InfoWindow replacement like InfoBubble or InfoBox or even create your own custom overlay
I have the following function, first I create the marker, then I create an infowindow loading the html from a template, until here everything works perfectly. And here is the problem, I am trying to change the appearance of the infowindow, I am trying for example to hide everything $(".instagram-marker-infowindow").hide() just to see if it works, but it doesn't
this.addToMap = function(InstaPic){
var marker = new google.maps.Marker({
position: { lat: InstaPic.latitude, lng: InstaPic.longtitude },
map: mymap,
title: 'Hello World!',
optimized:false
});
$.get("instagram-marker-template.html", function(data){
var infowindow = new google.maps.InfoWindow({
content: data
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mymap,marker);
});
$(".instagram-marker-infowindow").hide();
});
}
Any idea why this is happening?
I have an application using Google maps, currently I have a number of markers added to the page and clicking on them opens up a info window.
I also have a pagniated list of results which I would like to open the corresponding info window when clicked. Currently clicking on one of these anchors opens all of the info windows, but this is as far as I can get currently.
I have a position marker function:
positionMarkers: function(lat, lng, user) {
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(lat, lng),
map: map
});
if (caption == null) {
var caption = 'No caption available';
} else {
var caption = caption.text;
}
var contentString = '<div class="infoWindow"><h2>' + user + '</h2></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 284
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
$('.instaframe').bind('click', function(){
infowindow.open(map, marker);
});
}
The trouble I am having is with the bind function towards the end of the snippet. I am not sure where to go to bind the click event with just the marker being added each time the positionMarkers function runs.
Marker one
Marker two
Marker three
Help would be greatly apprecaited.
I am making a website over cyclists killed in Norway. For my project I have been using google maps api v3, but I have vague familiarity with javascript. You can see my result so far here: http://salamatstudios.com/googlemapstest/
Basicly I want to have multiple markers with infowindows on each one. Each one of the infowindows will contain:
Name (age),
Location,
Date of death,
Read more (which will be linked to a page on the website itself).
Like this example here: http://salamatstudios.com/bicycles/
I tried working with just one marker and infowindow and that worked just fine. When I want to add new markers with custom info windows on each I get stuck. At the moment I have 3 markers on different locations as seen in the first link, but none of the info windows appear when I click the marker..
How do I go around it to code it so the infowindows appear? And how can I have custom text in every infowindow? I am going to have about 30-40 markers on the map when it is done. All of the info windows will have different types of information.
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(65.18303, 20.47852),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// MAP CONTROLS (START)
mapTypeControl: true,
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
// MAP CONTROLS (END)
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
// -------------- MARKER 1
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(59.96384, 11.04120),
map: map,
icon: 'img/bike5.png'
});
// MARKER 1'S INFO WINDOW
var infowindow1 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, marker);
});
// -------- END OF 1st MARKER
// -------------- MARKER 2
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(60.63040, 8.56102),
map: map,
icon: 'img/bike5.png'
});
// MARKER 2'S INFO WINDOW
var infowindow2 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker2, 'click', function() {
// Calling the open method of the infoWindow
infowindow2.open(map, marker);
});
// -------- END OF 2nd MARKER
// -------------- MARKER 3
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(60.39126, 5.32205),
map: map,
icon: 'img/bike5.png'
});
// MARKER 3'S INFO WINDOW
var infowindow3 = new google.maps.InfoWindow({
content: 'Name<br />Location<br />Date<br /><br />Read more(test link)'
});
// End of infowindow code
// Adding a click event to the marker
google.maps.event.addListener(marker3, 'click', function() {
// Calling the open method of the infoWindow
infowindow3.open(map, marker);
});
// -------- END OF 3rd MARKER
}
google.maps.event.addDomListener(window, 'load', initialize);
Would be great if some could give me a clue. I've tried searching around a bit, but I can't really find my answer. Thanks in advance! :-)
You need to attach the infowindow to the correct markers. Currently they are all associated with "marker", which doesn't exist (and should cause an error message in the javascript console when you click on the markers).
Inside the click listener change:
infowindow1.open(map, marker);
infowindow2.open(map, marker);
infowindow3.open(map, marker);
To:
infowindow1.open(map, marker1);
infowindow2.open(map, marker2);
infowindow3.open(map, marker3);
working example
In addition to HoangHieu Answer when you use for loop it better to use it this way:
marker.info = new google.maps.InfoWindow({
content: 'some text'
});
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map, this);
});
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, marker);
});
change to
google.maps.event.addListener(marker1, 'click', function() {
// Calling the open method of the infoWindow
infowindow1.open(map, this);
});