I have a API V3 map, with a content window for each marker. Each marker has an info window containg a .SVG file. The content of the infowindow stretches across multiple lines, but the infowindow does not resize to fit it all, causing an iframe-like scroll to appear. Also i can't even close the info windo.
Is there anyone help me how to fix my problem.
Here is my code
function initialize(){
var myCenter = new google.maps.LatLng(36.4333, -117.9509);
var sfv = new google.maps.LatLng(34.18258, -118.43968);
var sgv = new google.maps.LatLng(34.07959, -118.03335);
var pasadena = new google.maps.LatLng(34.14778, -118.14452);
var la = new google.maps.LatLng(34.05223, -118.24368);
var oc = new google.maps.LatLng(33.71747, -117.83114);
var imageBounds=new google.maps.LatLngBounds(
new google.maps.LatLng(36.3943, -118.1050),
new google.maps.LatLng(36.4735, -117.8529));
var marker, marker1;
var mapProp = {
zoom:9,
center:la,
mapTypeId: google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
var marker1=new google.maps.Marker({
position:sfv,
animation:google.maps.Animation.BOUNCE
});
var marker2=new google.maps.Marker({
position:sgv,
animation:google.maps.Animation.BOUNCE
});
var marker3=new google.maps.Marker({
position:pasadena,
animation:google.maps.Animation.BOUNCE
});
var marker4=new google.maps.Marker({
position:la,
animation:google.maps.Animation.BOUNCE
});
var marker5=new google.maps.Marker({
position:oc,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
marker1.setMap(map);
marker2.setMap(map);
marker3.setMap(map);
marker4.setMap(map);
marker5.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
var infowindow1 = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
var infowindow2 = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
var infowindow3 = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
var infowindow4 = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
var infowindow5 = new google.maps.InfoWindow({
content: '<IMG BORDER="0" ALIGN="Left" SRC="test.svg">'
});
// event handlers for clicking
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(googleMap,marker);
});
google.maps.event.addListener(marker1, 'click', function(){
infowindow1.open(googleMap,marker1);
});
google.maps.event.addListener(marker2, 'click', function(){
infowindow2.open(googleMap,marker3);
});
google.maps.event.addListener(marker3, 'click', function(){
infowindow3.open(googleMap,marker3);
});
google.maps.event.addListener(marker4, 'click', function(){
infowindow4.open(googleMap,marker4);
});
google.maps.event.addListener(marker5, 'click', function(){
infowindow5.open(googleMap,marker5);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload = "initialize()">
<div id="googleMap" style="width:1080px;height:650px;"></div>
</body>
You can set a max width by passing in the relevant parameter, as discussed in the docs:
var infowindow = new google.maps.InfoWindow({
content: ...,
maxWidth: 300
})
relevant docs.
Note that the width can't go below 247. As for setting the height, there isn't a specific parameter for that. You can use CSS to control it, though. Just give the img elements a max-height styling.
Related
I have searched, researched and searched some more.
I am desperately trying to make it so my map changes its zoom automatically with different browser sizes as it keeps the markers on the map viewable. Right now the best thing that works for me is:
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
And even that is flawed. When the map becomes smaller, say on a mobile device, the markers eventually leave visibility since the zoom does not change. I need the zoom to change. Seemingly, this is the solution(I've done a lot of research, mostly from Stack Overflow):
map.fitBounds(firstB,secondB);
firstB, and secondB are the latitude and longitude that my markers use for their position.
I've even tried:
bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);
Currently this is what I have:
<script>
var geocoder;
var map;
function initialize() {
firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(38.938987, -104.717286);
var mapOptions = {
zoom:18,
center:latlng,
disableDefaultUI:true
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.fitBounds(firstB,secondB);
var styles=[
{
featureType:"road",
elementType:"labels",
stylers:[
{visibility:"off"}
]
}
];
map.setOptions({styles: styles});
var pinIcon = new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(52, 52)
);
var marker = new google.maps.Marker({
position: firstB,
map: map,
title: 'AVS',
icon:pinIcon,
});
var firstB_contentString = '<div><p>Medical Office Building</p><p class="infoContent">6007 E Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></p></div>';
var firstB_infowindow = new google.maps.InfoWindow({
content: firstB_contentString
});
google.maps.event.addListener(marker, 'click', function() {
firstB_infowindow.open(map,marker);
});
var smarker = new google.maps.Marker({
position: secondB,
map: map,
title: 'AVS',
icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
var secondB_contentString = '<div><p>General Hospital</p><p class="infoContent">6001 E. Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></div>';
var secondB_infowindow = new google.maps.InfoWindow({
content: secondB_contentString
});
google.maps.event.addListener(smarker, 'click', function() {
secondB_infowindow.open(map,smarker);
});
google.maps.event.addListener(map, 'mousedown', function() {
firstB_infowindow.close(map,marker);
secondB_infowindow.close(map,smarker);
});
google.maps.event.addListener(marker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
google.maps.event.addListener(smarker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
/*bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);*/
}
google.maps.event.addDomListener(window, 'load', initialize);
/*google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});*/
</script>
Nothing works.
Fix your bounds, make that global and call map.fitBounds in the resize handler code:
var bounds = new google.maps.LatLngBounds();
function initialize() {
var firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
var secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
bounds.extend(firstB);
bounds.extend(secondB);
Then:
google.maps.event.addDomListener(window, "resize", function() {
google.maps.event.trigger(map, "resize");
map.fitBounds(bounds);
});
working fiddle
code snippet:
var geocoder;
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
var firstB = new google.maps.LatLng(38.9395799,-104.7168500999999);
var secondB = new google.maps.LatLng(38.9382571,-104.71727069999997);
bounds.extend(firstB);
bounds.extend(secondB);
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(38.938987, -104.717286);
var mapOptions = {
zoom:18,
center:latlng,
disableDefaultUI:true
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.fitBounds(bounds);
var styles=[
{
featureType:"road",
elementType:"labels",
stylers:[
{visibility:"off"}
]
}
];
map.setOptions({styles: styles});
var pinIcon = new google.maps.MarkerImage(
'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
null, /* size is determined at runtime */
null, /* origin is 0,0 */
null, /* anchor is bottom center of the scaled image */
new google.maps.Size(52, 52)
);
var marker = new google.maps.Marker({
position: firstB,
map: map,
title: 'AVS',
icon:pinIcon,
});
var firstB_contentString = '<div><p>Medical Office Building</p><p class="infoContent">6007 E Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></p></div>';
var firstB_infowindow = new google.maps.InfoWindow({
content: firstB_contentString
});
google.maps.event.addListener(marker, 'click', function() {
firstB_infowindow.open(map,marker);
});
var smarker = new google.maps.Marker({
position: secondB,
map: map,
title: 'AVS',
icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png'
});
var secondB_contentString = '<div><p>General Hospital</p><p class="infoContent">6001 E. Woodmen Rd.</p><p class="infoContent">Colorado Springs, CO 80923</p></div>';
var secondB_infowindow = new google.maps.InfoWindow({
content: secondB_contentString
});
google.maps.event.addListener(smarker, 'click', function() {
secondB_infowindow.open(map,smarker);
});
google.maps.event.addListener(map, 'mousedown', function() {
firstB_infowindow.close(map,marker);
secondB_infowindow.close(map,smarker);
});
google.maps.event.addListener(marker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
google.maps.event.addListener(smarker, 'mousedown', function() {
firstB_infowindow.close();
secondB_infowindow.close();
});
/*bounds = new google.maps.LatLngBounds();
bounds.extend(marker);
bounds.extend(smarker);
map.fitBounds(bounds);*/
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
google.maps.event.trigger(map, "resize");
map.fitBounds(bounds);
});
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" style="border: 2px solid #3872ac;"></div>
I am trying to add a Google maps InfoWindow Dynamically to Wordpress, this is the code that is currently working with a custom marker I have tried several functions for infowindows but it seems to be breaking and not loading the map. not sure what I might be doing wrong.
this works I just need to add a infoWindow
<script type="text/javascript">
//<![CDATA[
function load() {
var styles =
[
{
"stylers": [
{ "lightness": 1 },
{ "saturation": -76 },
{ "hue": "#3bff00" }
]
}
];
var lat = <?php echo $lat; ?>;
var lng = <?php echo $lng; ?>;
// coordinates to latLng
var latlng = new google.maps.LatLng(lat, lng);
// map Options
var myOptions = {
zoom: 14,
scrollwheel: false,
center: latlng,
mapTypeId: 'Styled'
};
//draw a map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: '/wp-content/themes/bills_theme/images/pin_bills.png',
});
}
// call the function
load();
//]]>
</script>
A simple infowindow would be (not tested):
//draw a map
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });
map.mapTypes.set('Styled', styledMapType);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: '/wp-content/themes/bills_theme/images/pin_bills.png',
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, "click", function(e) {
infowindow.setContent("Hello world");
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, "click");
}
// call the function
Just add this code:
var contentString = 'put your content here.';
google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow({
content: contentString,
position: latlng,
maxWidth: 200
});
infowindow.open(map);
});
More info about Info Window you can read HERE.
Can't fathom why the info window won't display on this page...
http://www.triangledesign.biz/contact-dev.php
Also noticed the google example has no info window...
https://google-developers.appspot.com/maps/documentation/javascript/examples/infowindow-simple.
Code...
var mapOptions = {
center: new google.maps.LatLng(51.539104, -2.400264),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var image = 'cup-sm.png';
var myLatLng = new google.maps.LatLng(51.539104, -2.400264);
var contentString = '<div id="content" style = "width:100px;height:100px;background:white">test content</div>';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title:"Get In Touch",
icon: image
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
I have a custom google map which i have added styling to, its an event map with dynamic markers, i have got the map working where it loads all the dynamic markers and info, on my page there are results underneath the map, i would like to be able to click on a link in the results which will open the relevant infowindow on the map. I have been using Raymond Camdens demo which is from this article, i cannot get the last part to work with the links on the page(i had to take the geocoding part of the script out as i dont need it to geocode addresses, im using coordinates.)
Here is my code:
var map;
var lastinfowindow;
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
{ hue: "#0b9cc1" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "administrative.country",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
},
{ featureType: "water",
elementType: "geometry",
stylers: [ { visibility: "on" }, { lightness: -10 }] },
{ featureType: "poi",
stylers: [ { visibility: "on" } ] }
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var latlng = new google.maps.LatLng(38, -90);
var mapOptions = {
zoom: 3,
center: latlng,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var image = 'sp-mark.png';
latLng = new google.maps.LatLng ('23.00593', '12.65287');
var marker1 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 1 - 38',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 38;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('57.19173', '-1.7083');
var marker2 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 2 - 30',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 2</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 30;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('56.98083', '1.30056');
var marker3 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 3 - 32',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 3</h3><p>Location: here, Ibiza</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 32;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('58.96', '1.39861');
var marker4 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 4 - 41',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 41;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('-43.92528', '28.42389');
var marker5 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 5 - 47',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 5</h3><p>Location: Here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 47;
marker.infowindow = infowindow;
markers[markers.length] = marker;
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
$(".order").click(function() {
var thisgig = $(this).data("gigid");
for(var i=0; i<markers.length; i++) {
if(markers[i].gigid == thisgig) {
console.log("found my match");
//get the latlong
if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
console.dir(markers[i]);
map.panTo(markers[i].getPosition());
markers[i].infowindow.open(map, markers[i]);
lastinfowindow = markers[i].infowindow;
}
}
});
}
here is the body section where the links will go:
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="orders">
<p class="order" data-gigid="38">
<b>Order 38</b><br/>
Event 1
</p>
<p class="order" data-gigid="30">
<b>Order 30</b><br/>
Event 2
</p>
<p class="order" data-gigid="32">
<b>Order 32</b><br/>
Event 3
</p>
<p class="order" data-gigid="41">
<b>Order 41</b><br/>
Event 4
</p>
<p class="order" data-gigid="47">
<b>Order 47</b><br/>
Event 5
</p>
</div>
</body>
Please can someone help me with this issue.
Thanks
Google maps will generally fail to load if you have any javascript errors in your page. You have many.
You have a syntax error here:
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>
});
Should be:
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
});
LatLng takes two floats, not two strings:
latLng = new google.maps.LatLng ('23.00593', '12.65287');
Javascript is case-sensitive. So when you say:
latLng = new google.maps.LatLng ('23.00593', '12.65287');
var marker1 = new google.maps.Marker({
...
position: LatLng
});
It doesn't recognise LatLng because your variable was called latLng
The problem here:
marker.gigid = 38;
is that you don't have a variable called marker; you have a variable called marker1:
var marker1 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 1 - 38',
icon:image
});
For completeness, here's how one of your markers should be done (there are better ways, but this should work):
latLng = new google.maps.LatLng (23.00593,12.65287);
var marker1 = new google.maps.Marker({
map: map,
position: latLng ,
title: 'Event 1 - 38',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map,marker1);
});
marker1.gigid = 38;
marker1.infowindow = infowindow;
markers[markers.length] = marker1;
dear professionals.
I want to make info window for each markers on google maps.
My code:
google.maps.event.addListener(marker, 'click', function() {
new google.maps.InfoWindow({content: content}).open(map, marker);
});
show infowindow only for last marker.
Please, give me example or link to tutorial.
This is a modification of my answer to this question: Maps API Javascript v3 how to load markers with a mouse click
It loads an array of markers with info windows, and displays the last one added.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>boats</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
</script>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
var map = null;
function initialize() {
var washington = new google.maps.LatLng(47.7435, -122.1750);
var myOptions = {
zoom: 7,
center: washington,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
infowindow = new google.maps.InfoWindow({ content: "loading..." });
boats(map, seller);
}
var seller = [
['joe boat', 48.0350,-122.2570, 4, 'This is in good shape.'],
['bobs boat', 48.7435, -122.1750, 2, 'This is in bad shape.'],
['bubas boat', 47.3435, -122.1750, 1, 'This is in ok shape'],
['daveys boat', 47.7435, -122.1750, 3, 'dont buy this one.']
];
function boats(map, markers) {
for (var i = 0; i < markers.length; i++) {
var seller = markers[i];
var sellerLatLng = new google.maps.LatLng(seller[1], seller[2]);
var marker = new google.maps.Marker({
position: sellerLatLng,
map: map,
title: seller[0],
zIndex: seller[3],
html: seller[4]
});
var contentString = "content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
// display the last marker infowindow
infowindow.setContent(marker.html);
infowindow.open(map,marker);
}
</script>
<body onLoad="initialize()">
<div id="map_canvas" style="width: 450px; height: 350px;">map div</div>
</body>
</html>