Hey guys I'm creating a map that uses multiple markers with a distinct infobox for each marker. I know I can use arrays to create the new markers but I don't know how I could make a unique infobox for each marker.
<code>
<html>
<head>
<title>Google Maps Test</title>
<style type="text/css">
#map_container{
width:100%;
height:350px;
}
#hook {
color:#0C6;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function loadMap() {
var latlng = new google.maps.LatLng(4.3695030, 101.1224120);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_container"),myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"test"
});
var infoWindowOptions = {
content: '<p id="hook">Hello World!</p>'
};
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker,'click',function(e){
infoWindow.open(map, marker);
});
}
</script>
</head>
<body onLoad="loadMap()">
<div id="map_container"></div>
</body>
</html>
</code>
you can use this one with infobox example: http://jsfiddle.net/ccJ9p/7/
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
function initialize() {
var secheltLoc = new google.maps.LatLng(49.47216, -123.76307),
markers,
myMapOptions = {
zoom: 13,
center: secheltLoc,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
function initMarkers(map, markerData) {
var newMarkers = [],
marker;
for(var i=0; i<markerData.length; i++) {
marker = new google.maps.Marker({
map: map,
draggable: true,
position: markerData[i].latLng,
visible: true
}),
boxText = document.createElement("div"),
//these are the options for all infoboxes
infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
newMarkers.push(marker);
//define the text and style for all infoboxes
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";
boxText.innerHTML = markerData[i].address + "<br>" + markerData[i].state;
//Define the infobox
newMarkers[i].infobox = new InfoBox(infoboxOptions);
//Open box when page is loaded
newMarkers[i].infobox.open(map, marker);
//Add event listen, so infobox for marker is opened when user clicks on it. Notice the return inside the anonymous function - this creates
//a closure, thereby saving the state of the loop variable i for the new marker. If we did not return the value from the inner function,
//the variable i in the anonymous function would always refer to the last i used, i.e., the last infobox. This pattern (or something that
//serves the same purpose) is often needed when setting function callbacks inside a for-loop.
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
newMarkers[i].infobox.open(map, this);
map.panTo(markerData[i].latLng);
}
})(marker, i));
}
return newMarkers;
}
//here the call to initMarkers() is made with the necessary data for each marker. All markers are then returned as an array into the markers variable
markers = initMarkers(map, [
{ latLng: new google.maps.LatLng(49.47216, -123.76307), address: "Address 1", state: "State 1" },
{ latLng: new google.maps.LatLng(49.47420, -123.75703), address: "Address 2", state: "State 2" },
{ latLng: new google.maps.LatLng(49.47530, -123.78040), address: "Address 3", state: "State 3" }
]);
}
</script>
<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()" style="padding:1em">
<div id="map_canvas" style="width: 100%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; height: 300px;border:1px solid #666;margin-bottom:1em;box-shadow: 0px 0px 10px #333;"></div>
<p> This example shows the use of an InfoBox as a replacement for an InfoWindow.
<script type="text/javascript">
$(function() {
if($.browser.msie) {
$("<div/>", {html:"<br>Download Firefox <a href='http://www.mozilla.org/de/firefox/new/'>here</a>.", target:"_blank"}).appendTo("body");
}
});
</script>
</body>
</html>
Related
I have a problem with google map, we have a website where we have introduced a map using the api , the problem is that the map when it is initialized comes in gray, he is blamed for resizing , but I can not solve. The map is initially hidden , and jquery by clicking on a field in a table shown.
enter code here
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#googleMap {
width: 100%;
height: 470px;
margin-top: 6.5%;
overflow: visible;
max-width: none !important;
}
</style>
</head>
<div id="googleMap"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=[key]&signed_in=false&">
</script>
<script>
var myCenter = new google.maps.LatLng(39.287649, -0.422548);
var myCenterverd = new google.maps.LatLng(39.287413, -0.422255);
var myCenterroig = new google.maps.LatLng(39.288497, -0.423953);
var myCentergroc = new google.maps.LatLng(39.287766, -0.421604);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.287413, -0.422255),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
//disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapOptions);
//var marker=new google.maps.Marker({position:myCenter,icon:'gotaico.png'});
var markerverd = new google.maps.Marker({
position: myCenterverd,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicoverd.png'
});
var markerroig = new google.maps.Marker({
position: myCenterroig,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicoroig.png'
});
var markergroc = new google.maps.Marker({
position: myCentergroc,
icon: '../dashboard/include/Mapa/iconosrellenos/gotaicogroc.png'
});
//marker.setMap(map);
markerverd.setMap(map);
markerroig.setMap(map);
markergroc.setMap(map);
}
//google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(map) {
setTimeout('initialize()', 2000);
google.maps.event.addListener(map, "idle", function(){
google.maps.event.trigger(map, 'resize');
this.map.setZoom( this.map.getZoom() - 1 );
this.map.setZoom( this.map.getZoom() + 1 );
});
});
</script>
</html>
Probably you should set the backgroundColor to transparent in the mapOptions.
var mapOptions = {
center: new google.maps.LatLng(39.287413, -0.422255),
zoom: 10,
backgroundColor: 'transparent',
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
Can you please take a look at this demo and let me know why I am not able to render associated info windows on link clicks?
As you can see I already tried
$('#mapa').append('<li class=' + marker.id + '>' + data.markers[p].title + '</li>');
function showInfo(i) {
google.maps.event.trigger(locations[i], "click");
}
but I am getting
Uncaught ReferenceError: showInfo is not defined
when I click on the links!
Thanks
To be run from an HTML on click function, your showInfo function needs to be in the global context.
Also, if you look at the generated HTML you will see:
Barcelona
(-1 is not a valid index for the array)
And the locations array is empty, you never push the markers on to it.
When I fix all of those issues, the links work: updated fiddle
code snippet:
var map;
var locations = [];
function showInfo(i) {
google.maps.event.trigger(locations[i], "click");
}
$(document).ready(function() {
var latlng = new google.maps.LatLng(11.610707, 122.740089);
var myOptions = {
zoom: 12,
center: latlng,
disableDefaultUI: true,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
mapTypeControl: true,
draggableCursor: 'move',
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: ""
});
var data = {
"markers": [{
"latitude": 11.606503,
"longitude": 122.712637,
"title": "Copenhagen"
}, {
"latitude": 11.585988,
"longitude": 122.757084,
"title": "Barcelona"
}
]
};
locations.length = 0;
for (p = 0; p < data.markers.length; p++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.markers[p].latitude, data.markers[p].longitude),
map: map,
draggable: false,
title: "marker " + p,
id: p
});
locations.push(marker);
$('#mapa').append('<li class=' + marker.id + '>' + data.markers[p].title + '</li>');
bindInfoWindow(marker, map, infowindow, data.markers[p].title);
}
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
}
});
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');
.container {
margin-top: 30px;
}
#map_canvas {
width: 100%;
height: 400px;
}
.highlighted {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<ul id="mapa">
</ul>
<div class="container">
<div class="well">
<div id="map_canvas"></div>
</div>
</div>
guys.
I have the following code in an HTML page. It shows a Google map with custom markers and everithing is working ok so far:
<html>
<head>
<meta charset="utf-8">
<title>Ejemplito</title>
<style>
#map_canvas {
width: 600px;
height: 300px;
background-color: #CCC;
}
</style>
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function addMarker(titulo, pos, iconName, mapa) {
var marker = new google.maps.Marker({
map: mapa,
position: pos,
icon: iconName,
title: titulo
});
}
function init(container, x, y, zoom) {
map_canvas = document.getElementById(container);
var map_options = {
center: new google.maps.LatLng(x, y),
zoom: zoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
}
var map = new google.maps.Map(map_canvas, map_options);
addMarkers(map);
}
</script>
<script>
var map_canvas = document.getElementById('map_canvas');
var icon = 'https://cdn1.iconfinder.com/data/icons/Webtoys/64/Pin.png';
function addMarkers(mapa) {
var pos1 = new google.maps.LatLng(19.2887395,-99.198382,14);
addMarker('Primer marcador', pos1, icon, mapa);
var pos2 = new google.maps.LatLng(19.2792758,-99.2334069,14);
addMarker('Segundo pin', pos2, icon, mapa);
}
$(function() {
init('map_canvas',19.2792608,-99.2334009,13);
});
</script>
</head>
<body>
<h1>Hola</h1>
<div id="map_canvas"></div>
</body>
</html>
However, when I move the mouse wheel over the map, It performs a zoom (out/in) and I need to disable such behavior.
My question is: What code (line, if possible) in my html page should I change/add, in order to disable such behavior?
Than you very much!!!
in map options:
scrollwheel: false.
https://developers.google.com/maps/documentation/javascript/reference#ZoomControlOptions
I am trying to get infoboxes and cluster markers working nicely on my Google map but I am having trouble.
I have successfully got cluster markers working but I don't know how to load the page without all the infoboxes.
Edit: I have edited the below code to Geocodezip's suggestion and it is working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false&ext=.js">
</script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript" src="markerclusterer.js"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var secheltLoc = new google.maps.LatLng(-33.8515592,151.0386416),
markers,
myMapOptions = {
zoom: 7,
center: secheltLoc,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), myMapOptions);
// Start InfoBox
function initMarkers(map, markerData) {
var newMarkers = [],
marker;
for(var i=0; i<markerData.length; i++) {
var lat = markerData[i].lat;
var lng = markerData[i].long;
marker = new google.maps.Marker({
map: map,
draggable: false,
position: new google.maps.LatLng(lat, lng),
visible: true
}),
boxText = document.createElement("div"),
//these are the options for all infoboxes
infoboxOptions = {
content: boxText,
disableAutoPan: false,
zIndex: null,
maxWidth: 0,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.85,
},
closeBoxMargin: "6px 2px 0px 0px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: true
};
newMarkers.push(marker);
//define the text and style for all infoboxes
boxText.style.cssText = "border: 1px solid #333; margin-top: 3px; background: #fff; padding: 1px; font-size: 11px; white-space:nowrap; padding-right: 20px; color: #333";
boxText.innerHTML = markerData[i].BusinessName;
//Define the infobox
newMarkers[i].infobox = new InfoBox(infoboxOptions);
//Open box when page is loaded
// newMarkers[i].infobox.open(map, marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
for ( h = 0; h < newMarkers.length; h++ ) {
newMarkers[h].infobox.close();
}
newMarkers[i].infobox.open(map, this);
map.panTo(new google.maps.LatLng(lat, lng));
}
})(marker, i));
}
var markerCluster = new MarkerClusterer(map, newMarkers);
}
//here the call to initMarkers() is made with the necessary data for each marker. All markers are then returned as an array into the markers variable
markers = initMarkers(map, [
// DON'T EDIT BELOW THIS LINE.
{ lat: -33.878301, long: 150.981126, BusinessName: 'Example<br>InfoBox1' },
{ lat: -33.7452559, long: 150.6897012, BusinessName: 'Penrith Business' },
{ lat: -33.8618472, long: 151.1834829, BusinessName: 'Sydney Business' },
{ lat: -36.5796478, long: 144.7272382, BusinessName: 'Vic Business' },
{ lat: -33.2859758, long: 149.0950847, BusinessName: 'Orange Business' },
{ lat: -33.799211, long: 150.926357, BusinessName: '<a target="_blank" href="http://example.com">Example</a>', Note: 'This is an unseen note.' }
// DON'T EDIT ABOVE THIS LINE.
]);
}
// End InfoBox
// Geocoder below
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var BlueMarker = 'images/blue-marker.png';
var marker = new google.maps.Marker({
map: map,
icon: BlueMarker,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
// End Geocoder
</script>
</head>
<body onload="initialize()">
<div class="container">
<div class="content">
<div id="panel">
<input id="address" type="textbox" value="Melbourne, VIC">
<input type="button" value="< Type location to move map (and place blue marker)" onclick="codeAddress()">
</div>
<div style="width:850px; height: 600px" id="map-canvas"></div>
</div>
</div>
</body>
</html>
Remove the infowindow.open from the code that creates the infowindow if you don't want it open by default.
Comment out or remove this line:
//Open box when page is loaded
newMarkers[i].infobox.open(map, marker);
(leave the infowindow.open in the marker click event listener)
working fiddle
I am using Info box plugin in google map v3
I want to replicate the same functioning as seen here
http://coolhunting.com/local/#/metroarea/chicago/jack-spade/
Basically I want that whenever some one click on sidebar , respective info box should open in map.
I have added a onclick function on click on element in sidebar , but not sure what should I do in that function
Here is the code I have
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 50% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api /js?sensor=true"></script>
<script src="js/infobox.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(66.672962361614566, 12.56587028503418);
var myMapOptions = {
zoom:5
,center: latlng
,mapTypeId: google.maps.MapTypeId.ROADMAP
,streetViewControl: false
};
var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
// namn
var name=[];
name.push('Test 1');
name.push('Test 2');
// positioner
var position=[];
position.push(new google.maps.LatLng(66.667093265894245,12.581255435943604));
position.push(new google.maps.LatLng(62.66453963191134, 12.584795951843262));
// infoboxes
var infobox = [];
infobox.push("<div>Hello 1</div>");
infobox.push("<div>Hello 2</div>");
var markers=new Array();
for (i = 0; i < position.length; i += 1) {
// Call function
createMarkers(position[i], infobox[i], name[i]);
}
function createMarkers(position,content,name) {
var marker = new google.maps.Marker({
map: theMap,
draggable: false,
position: position,
visible: true,
title: name
});
markers.push(marker);
var boxText = document.createElement("div");
boxText.style.cssText = "background: #ffffff; width: 300px; height: 70px; padding: 5px;";
boxText.innerHTML = content;
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-37, -120)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 1
,width: "300px"
}
,closeBoxMargin: "5px 5px 5px 5px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function (e) {
ib.open(theMap, this);
});
var ib = new InfoBox(myOptions);
//ib.open(theMap, marker);
}
}
function show_marker(){
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div><div><a onclick="show_marker()" href="javascript:void(0)">show marker</a></div>
</body>
</html>
This isn't hard, because when you add an info window to the map, the map scrolls to show the info window.
Make your map.
Make your sidebar.
Add markers to the map, while adding elements to the sidebar. Make the elements in the sidebar clickable, so that when you click on them you have something like this:
(This is from my own site.)
var marker =new google.maps.Marker({
position: new google.maps.LatLng(searchResult.Latitude,searchResult.Longitude),
map: googleMap,
Title: searchResult.CompanyName
});
$('sideBarElement').addEvent('click', function() {
infoWindow.setContent("Some content for your info window.");
infoWindow.open(googleMap,marker);
});
When you .open() and infoWindow, the map automatically pans to display it.
( May be too late but if someone is googling for this )
Look into this question's answer which is exactly the samething I was looking for and now I found the answer Open infobox on button clicked "OUTSIDE" map ( google map v3 )