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
Related
I am trying to create a page that loads a small google map and it is working fine. Now I want to add a map event click that shows a bigger div displaying another google map with the same lng and lat. The div is shown properly a google logo and a beige background color , but there is no map and I can't figure out the problem. I am working on visual studio 2012 and google map is shown using javascript.
Below is my code:
var latlng;
function initialize(lng, lat) {
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "/Images/marker.png",
title: "This is the place."
});
var contentString = 'Hello <strong>World</strong>!';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
document.getElementById("map_canvas").style.visibility = 'visible';
map.addListener('click', function (e) {
var myOptions2 = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map2 = new google.maps.Map(
document.getElementById("modal-body"),
myOptions2);
var marker2 = new google.maps.Marker({
position: latlng,
map: map2,
icon: "/Images/marker.png",
title: "This is the place."
});
var contentString2 = 'Hello <strong>World</strong>!';
var infowindow2 = new google.maps.InfoWindow({
content: contentString2
});
google.maps.event.addListener(marker2, 'click', function () {
infowindow2.open(map2, marker2);
});
document.getElementById("myModal").style.display = "block";
});
}
Those are my divs where I am displaying my maps:
<div id="map_canvas" class="mapDiv" style="visibility:hidden" > </div>
<div id="myModal" class="modal" style="display: none">
<div class="modal-content">
<span onclick="CloseMyDiv();" id="closeSpan" class="close">×</span>
<br /><br />
<div id="modal-body" class="modal-body">
Hello world !
</div>
</div>
</div>
I repeat: modal-body changes when I click on map-canvas (by adding google logo and changing background color), but it is not displaying a map, and I tried to fill map in div before click event but still have the same problem.
Any hints?
Note: If I comment everything concerning map-canvas and I i show myModal div at onload event, map is displayed properly!
1.Make sure modal-body have width and height set in CSS.
2.If the div containing the map, or it's parent, or it's parent's parent (any predecessor) has display:none set at some point, the map view won't initialise properly and you will only see gray map. I noticed that you show the modal only after the map is initialised. So for map to appear properly, either run this code
document.getElementById("myModal").style.display = "block";
before the map2 initialisation, or trigger resize event on map after visibility change, which would reinitialise the map view:
google.maps.event.trigger(map2,'resize');
Probably not relevant for your case, but you need to also trigger resize event on map if the map containing's div dimensions change.
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.
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 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>'
});
I'm playing around with Google maps for the first time, so I looked at a nice tutorial over at CSS Tricks: http://css-tricks.com/google-maps-slider/ I like working with jQuery better than pure JS, and this tutorial makes a nice way to click on a place in a list to display the marker in the map.
I liked it that way, but I need to add infowindows to the marker. Which I did, but when I click on a place on the list and the map pans away, the infowindow stays open! I think it's because I need to attach the infowindow.close() to the event of clicking on a "#locations li".
Here's my code, which runs on document.ready:
$(function() {
var chicago = new google.maps.LatLng(41.924832, -87.697456),
pointToMoveTo,
first = true,
curMarker = new google.maps.Marker({}),
$el;
var myOptions = {
zoom: 10,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($("#map_canvas")[0], myOptions);
$("#locations li").click(function() {
$el = $(this);
if (!$el.hasClass("hover")) {
$("#locations li").removeClass("hover");
$el.addClass("hover");
if (!first) {
// Clear current marker
curMarker.setMap();
// Set zoom back to Chicago level
// map.setZoom(10);
}
// Move (pan) map to new location
function move(){
pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
map.panTo(pointToMoveTo);
}
move();
// Add new marker
curMarker = new google.maps.Marker({
position: pointToMoveTo,
map: map
});
// Infowindow: contenido
var contentString = '<p>'+$el.find("h3").html()+'</p>';
contentString += 'hola' ;
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50),
content: contentString
});
// On click, zoom map
google.maps.event.addListener(curMarker, 'click', function() {
//map.setZoom(14);
infowindow.open(map,curMarker);
});
It looks like you're creating a new InfoWindow for each marker. Quoting from the Google Maps API Docs:
If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks).
Therefore, you may simply want to create one InfoWindow object just after you initialize your map, and then handle the click event handler as follows:
google.maps.event.addListener(curMarker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map, curMarker);
});
Then the InfoWindow should automatically close when you click on a new marker without having to call the close() method.