Related
I'm using the infobox plugin in the google maps api to create customized infoboxes for places, yet it's only working for the first one (the one named "west").
When I replicate the code for it using different coordinates and names, it doesn't open when I click the marker.
Here's the code:
function initMap() {
var west = {
lat: 39.288682,
lng: -74.565635
};
var firststreetbeach = {
lat: 39.2807806,
lng: -74.5575138
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: west,
mapTypeId: google.maps.MapTypeId.HYBRID,
styles: [
{ featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }]}]
});
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: west,
visible: true
});
marker.setTitle("west");
var firststreetbeachMARKER = new google.maps.Marker({
position: firststreetbeach,
map: map
});
firststreetbeachMARKER.setTitle("First Street Beach");
var boxText = document.createElement("div");
boxText.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
boxText.innerHTML =
`<h1><div style="font-family: 'Permanent Marker', cursive;">
west</div></h1><p>
<b>Sick Place</b></p>`
var firststreetbeachBOX = document.createElement("div");
firststreetbeachBOX.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
firststreetbeachBOX.innerHTML =
`<h1><div style="font-family: 'Permanent Marker', cursive;">
First Street Beach</div></h1><p>
<b>Guarded Beach, Can Only Be Surfed Before The Life Guards Show Up, Or After.(Life Guards On Duty 10Am-5:30PM Starting May 25-End Of Summer)</b></p>`
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-120, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.90,
width: "235px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function(e) {
ib.open(map, this);
});
var ib = new InfoBox(myOptions);
ib.open(map, this);
map.panTo(ib.getPosition())
var myOptionsa = {
content: firststreetbeachBOX,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-120, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.90,
width: "235px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(firststreetbeachBOX, "click", function(e) {
ib.open(map, this);
});
var id = new InfoBox(myOptionsa);
id.open(map, this);
map.panTo(id.getPosition())
}
google.maps.event.addDomListener(window, 'load', initMap);
JSFIDDLE: https://jsfiddle.net/kaidemarco/06wpx75j/228/
I get a javascript error on your fiddle: Uncaught TypeError: anchor.getPosition is not a function. You have a number of typos in your code:
firststreetbeachBOX is an InfoBox, not a google.maps.Marker. That should be firststreetbeachMARKER.
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.open(map, this);
});
should be:
google.maps.event.addListener(firststreetbeachBOX, "click", function(e) {
ib.open(map, this);
});
Currently there is only one InfoBox reference ib. If you only want one to open on clicks, that is fine, but if you want the correct content, you need to reset the options in the onclick function:
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.open(map, this);
});
should be:
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.setOptions(myOptionsa);
ib.open(map, this);
});
In the ib.open(map, this) calls that are outside of the onclick function, the this is not a valid anchor. That should be the appropriate google.maps.Marker object:
// the first should be:
ib.open(map, marker);
// the second should be:
id.open(map, firststreetbeachMARKER);
proof of concept fiddle
code snippet:
function initMap() {
var west = {
lat: 39.288682,
lng: -74.565635
};
var firststreetbeach = {
lat: 39.2807806,
lng: -74.5575138
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: west,
mapTypeId: google.maps.MapTypeId.HYBRID,
styles: [{
featureType: "poi",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}]
});
var marker = new google.maps.Marker({
map: map,
draggable: false,
position: west,
visible: true
});
marker.setTitle("west");
var firststreetbeachMARKER = new google.maps.Marker({
position: firststreetbeach,
map: map
});
firststreetbeachMARKER.setTitle("First Street Beach");
var boxText = document.createElement("div");
boxText.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
boxText.innerHTML =
`<h1><div style="font-family: 'Permanent Marker', cursive;">
west</div></h1><p>
<b>Sick Place</b></p>`
var firststreetbeachBOX = document.createElement("div");
firststreetbeachBOX.style.cssText = "border: 4px solid black; margin-top: 8px; background: deepskyblue; padding: 3px;";
firststreetbeachBOX.innerHTML =
`<h1><div style="font-family: 'Permanent Marker', cursive;">
First Street Beach</div></h1><p>
<b>Guarded Beach, Can Only Be Surfed Before The Life Guards Show Up, Or After.(Life Guards On Duty 10Am-5:30PM Starting May 25-End Of Summer)</b></p>`
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-120, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.90,
width: "235px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(marker, "click", function(e) {
ib.setOptions(myOptions);
ib.open(map, this);
});
var ib = new InfoBox(myOptions);
ib.open(map, marker);
map.panTo(ib.getPosition())
var myOptionsa = {
content: firststreetbeachBOX,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-120, 0),
zIndex: null,
boxStyle: {
background: "url('tipbox.gif') no-repeat",
opacity: 0.90,
width: "235px"
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "https://lh3.google.com/u/0/d/1vBKI8gNIslaOItFoenaRADfZ3Mh4hrM5=w50-h48-p-k-nu-iv1",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
google.maps.event.addListener(firststreetbeachMARKER, "click", function(e) {
ib.setOptions(myOptionsa);
ib.open(map, this);
});
var id = new InfoBox(myOptionsa);
id.open(map, firststreetbeachMARKER);
map.panTo(id.getPosition())
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
.action-btns {
float: left;
width: 70px;
overflow: hidden;
position: relative;
top: 12px;
left: 6px;
}
<div id="map"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library#master/infobox/src/infobox.js"></script>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
I'm having problems getting google's searchbox service to run properly for me.
What I have is a map with a polygon drawn on it. I would like to use the searchbox and/or autocomplete service to return ONLY business of the specified type (e.g. restaurants, fast food, warehouses, etc.) that are within this polygons boundaries.
I can use the nearby service to return results based on type or keyword. I can also get the searchbox to return results for restaurants; however, if I update the search to look for other businesses, such as warehouses, the map zooms out and shows warehouses all over the world.
Here is a working fiddle example:
<html>
<head>
<meta charset="utf-8">
<title>Transition Center Online</title>
<meta name="description" content="">
<meta name="title" content="">
<meta name="author" content="WWRF">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#map {
height: 600px;
width: 100%;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
</style>
</head>
<body>
<div class="container">
<p>TODO: Add Google JavaScript Map with walkroute outline.</p>
<p>TODO: List walking times</p>
<p>TODO: List common walk routes and businesses</p>
<!-- where the map will live -->
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
</div>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;
var infowindow;
function initMap() {
var wwrf = {
lat: 37.682319,
lng: -97.333311
};
map = new google.maps.Map(document.getElementById('map'), {
center: wwrf,
zoom: 14
});
var squareCoords = [
{lat: 37.697465, lng: -97.341629},
{lat: 37.697636, lng: -97.317306},
{lat: 37.671759, lng: -97.317142},
{lat: 37.673308, lng: -97.352833},
{lat: 37.693239, lng: -97.352852}
];
// Construct the walkroute polygon.
var walkRoute = new google.maps.Polygon({
paths: squareCoords,
strokeColor: '#008000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#008000',
fillOpacity: 0.1
});
walkRoute.setMap(map);
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: wwrf,
radius: 1600,
type: ['establishment'],
//keyword: ['restaurant']
}, callback);
var walkRouteBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.673308, -97.352833),
new google.maps.LatLng(37.697636, -97.317306),
);
var options = {
bounds: walkRouteBounds,
strictBounds: true
};
// Create the search box and link it to the UI element.
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input, options);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
var markers = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
searchBox.setBounds(walkRouteBounds);
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
// For each place, get the icon, name and location.
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(37.673308, -97.352833),
new google.maps.LatLng(37.697636, -97.317306),
);
places.forEach(function(place) {
if (!place.geometry) {
console.log("Returned place contains no geometry");
return;
}
var icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
// Create a marker for each place.
markers.push(new google.maps.Marker({
map: map,
//icon: icon,
title: place.name,
position: place.geometry.location
}));
if (place.geometry.viewport) {
// Only geocodes have viewport.
bounds.union(place.geometry.viewport);
} else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
}
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<strong>' + place.name + '</strong><br/>' + place.formatted_address);
infowindow.open(map, this);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=your_api&libraries=places&callback=initMap" async defer></script>
</body>
GoogleMap searchbox fiddle
EDIT: Alright so I have been able to come up with a solution using a dropdown box, although it is not ideal because I have to hard code my keywords.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Walkroute Dropdown</title>
<meta name="description" content="">
<meta name="title" content="">
<meta name="author" content="WWRF">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#map {
height: 600px;
width: 100%;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
margin: 10px 10px 0 0;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #fff;
font-family: Roboto;
}
#pac-container {
padding-bottom: 12px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #4d90fe;
}
#title {
color: #fff;
background-color: #4d90fe;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
#target {
width: 345px;
}
</style>
</head>
<body>
<div class="container">
<select name="mapchange" onchange="updateMap(this.options[this.selectedIndex].value)">
<option value="restaurants">Restaurants</option>
<option value="warehouses">Warehouses</option>
<option value="temp services">Temp Services</option>
</select>
<!-- where the map will live -->
<div id="map"></div>
</div>
<script>
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
var map;
var infowindow;
var wwrf = {
lat: 37.682319,
lng: -97.333311
};
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: wwrf,
zoom: 14
});
var squareCoords = [
{lat: 37.697465, lng: -97.341629},
{lat: 37.697636, lng: -97.317306},
{lat: 37.671759, lng: -97.317142},
{lat: 37.673308, lng: -97.352833},
{lat: 37.693239, lng: -97.352852}
];
// Construct the walkroute polygon.
var walkRoute = new google.maps.Polygon({
paths: squareCoords,
strokeColor: '#008000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#008000',
fillOpacity: 0.1
});
walkRoute.setMap(map);
infowindow = new google.maps.InfoWindow();
/*var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: wwrf,
radius: 1600,
type: ['establishment'],
keyword: ['restaurant']
}, callback);*/
}
var markers = [];
function callback(results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
// Create a marker for each place.
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('<strong>' + place.name + '</strong><br/>' + place.formatted_address);
infowindow.open(map, this);
});
}
function updateMap(selectControl) {
// Clear out the old markers.
markers.forEach(function(marker) {
marker.setMap(null);
});
markers = [];
var keyword = selectControl;
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: wwrf,
radius: 1600,
type: ['establishment'],
keyword: keyword
}, callback);
}
function clearMarkers() {
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=your_api&libraries=places&callback=initMap" async defer></script>
</body>
</html>
And here's a link to the fiddle: Walkroute dropdown
I can see that you try to initialize the SearchBox with strictBounds: true option, but unfortunately, the SearchBox doesn't support strict bounds filter at current moment. If you can switch to the Autocomplete, it is indeed supports strict bounds and you can initialize the autocomplete like
var options = {
bounds: walkRouteBounds,
strictBounds: true,
types: ['establishment']
};
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input, options);
Regarding the strict bounds for SearchBox, there is a feature request in Google issue tracker:
https://issuetracker.google.com/issues/67982212
Feel free to star the feature request to add your vote and subscribe to notifications.
Ok ,I've been looking to this for a while and here comes a possible solution that I thought:
So inside the For loop in the callback Function may I suggest before creating a marker to ask (with a IF and I think there is a method called contains that returns a boolean) if the
place.geometry.location is inside your bounds, so if the place is not inside your bounds then you do not create that marker, therefore the map won't zoom out.
Another solution would be forcing the zoom to a value after the autocomplete search.
I hope with this you could find a solution to your issue.
Here is my code for google map marker with label. I have included following javascript files:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="js/markerwithlabel.js"></script>
and code for map is:
function initialize() {
var latLng = {lat: 12.923157, lng: 80.153337};
var homelatLng = new google.maps.LatLng(12.923157, 80.153337);
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: latLng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new MarkerWithLabel({
position: homelatLng,
map: map,
labelContent: "ihoser",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "map_marker_label", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
var infowindow = new google.maps.InfoWindow({
content: "content";
});
google.maps.event.addListener(marker, 'click', function(e) {
infowindow.open(map,this);
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
The style included is:
.map_marker_label {
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 40px;
height:20px;
border: 2px solid black;
white-space: nowrap;}
The map appears with marketr, infowindow and label. But the label is empty. In fact, labelContent does not load into DOM itself and even after centering the label by providing point, it seems to start at (0, 0).
I am attaching the image of the map.
Make sure you are using the latest version of markerwithlabel.js.
And there is a typo at line:
var infowindow = new google.maps.InfoWindow({
content: "content";
});
Replace it to
var infowindow = new google.maps.InfoWindow({
content: "content"
});
Working example
function initialize() {
var latLng = { lat: 12.923157, lng: 80.153337 };
var homelatLng = new google.maps.LatLng(12.923157, 80.153337);
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: latLng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new MarkerWithLabel({
position: homelatLng,
map: map,
labelContent: "ihoser",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "map_marker_label", // the CSS class for the label
labelStyle: { opacity: 0.75 }
});
var infowindow = new google.maps.InfoWindow({
content: "content"
});
google.maps.event.addListener(marker, 'click', function (e) {
infowindow.open(map, this);
});
infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map {
height: 480px;
width: 640px;
margin: 0px;
padding: 0px;
}
.map_marker_label {
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 40px;
height:20px;
border: 2px solid black;
white-space: nowrap;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map"></div>
Plunker
I have a problem in event listener. I created 'click' event listener in 'map', every time the user clicks on the map a new marker is created. Each marker has it's own infobox that contains a link to remove the marker.
The problem is when i click the remove link inside the infobox, the map's click event is always triggered. The marker is successfully removed but the it creates a new marker. How can i fix this? I just want to remove the marker.
here's the code:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=123456778&sensor=true"></script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript">
var map;
var markers = [];
var infowindows = [];
var marker_cnt = 0;
var marker_icons = { 'mall' : 'mall.png', 'train_station': 'train.png','park' : 'park.png', 'bank':'bank.png'};
var infoWindow;
var places = [
['Central','mall',1.2892612468505713,103.84759068489075,'central mall'] ,
['Dhoby Ghaut','train_station',1.298550049775337,103.84589552879333,'Dhoby Ghaut'] ,
['Outram Station', 'train_station',1.2812595487889478, 103.83896470069885,'Outram Station'],
['City Hall', 'bank', 1.2932084559435784, 103.85241866111755,'City Hall Station'],
['Little India Station', 'train_station', 1.3071308997488136, 103.84971499443054,'Little India Station'],
['Emily Park', 'park', 1.3071308997488136, 103.84971499443054,'Emily Park']
];
var myOptions = {
content: 'loading...'
,boxStyle: {
background: "#ccc"
,opacity: 1
,width: "280px"
,height: "100px"
,padding: "10px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,pane: "floatPane"
,enableEventPropagation: false
};
var infowindow = new InfoBox(myOptions);
google.maps.event.addListener(infowindow, 'click', function () {
console.log('aaaa');
});
function initialize()
{
var myLatlng = new google.maps.LatLng(1.2892826990902386,103.84409308433533);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event){
placeMarker(event.latLng,event.getPosition);
});
loadMarkers();
}
function loadMarkers()
{
for(var i = 0 ; i < places.length; i++)
{
var spot = places[i];
var spot_latlng = new google.maps.LatLng(spot[2],spot[3]) ;
var marker = new google.maps.Marker({
map:map,
draggable:false,
position: spot_latlng,
title: spot[0],
icon: marker_icons[spot[1]],
html: '<h1>'+spot[4]+'</h1> website '
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
function unloadMarkers()
{
for(var i = 0; i < markers.length; i++)
{
markers[i].setMap(null);
}
}
function setMapCenter(index)
{
var spot = places[index];
var spot_latlng = new google.maps.LatLng(spot[2],spot[3]);
infowindow.setContent(markers[index].html = spot[4]);
infowindow.open(map, markers[index]);
map.setCenter(spot_latlng);
}
function placeMarker(location,position)
{
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: location,
html: 'delete marker <br/> '+ location
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
google.maps.event.addListener(marker,'dragend',function(){
var html_content = 'delete marker <br/>'+ this.position;
this.html=html_content;
infowindow.setContent(this.html);
infowindow.open(map,this);
});
google.maps.event.addListener(marker,'dragstart',function(){
infowindow.close(map,this);
});
}
function removeMarker(index)
{
markers[index].setMap(null);
infowindow.close(map, markers[index]);
infowindows[index].close();
return false;
}
</script>
<style type="text/css">
html{
font:12px Arial, Helvetica, sans-serif;
color:#333;
padding:0;
margin:0;
}
.listmenu{
height:300px;
}
.listmenu ul {
margin: 0 0 5px 0;
padding: 0 0 2px 0;
list-style-type: none;
width:185px;
}
.listmenu li a {
color: #333;
display: block;
height: 16px;
padding: 4px 0 4px 14px;
text-decoration: none;
font-weight:bold;
background-color:#fff;
}
.listmenu li a:hover {
background-color: #666;
color:#fff;
}
</style>
<body onload="initialize()">
<div id="map_canvas" style="width:1000px; height:300px; border: 3px solid #666"></div>
pass the click-event as argument to removeMarker()
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: location,
html: '<a href="#" onclick="removeMarker('+ (markers.length) +',event)">\
delete marker</a> <br/> '+ location
});
Then you'll be able to stop the propagation of the event:
function removeMarker(index,event)
{
try{event.cancelBubble=true;}//IE
catch(e){event.stopPropagation();}//others
markers[index].setMap(null);
infowindow.close(map, markers[index]);
return false;
}
Thanks for the reply. I already solved this problem. I fixed it by removing "onclick" and placing javascript to href <a href='javascript: removeMarker(index)'> remove </a>
This is a google map with an InfoBox, I want to achieve the Yelp's map tooltip div effect. In other words I want to position an infoBox on top of a google map, in order to do that I'm using a google maps InfoBox with a z-index higher than the map z-index, but it is not working, this is the jsfiddle help please,
http://jsfiddle.net/MdhzR/
In this example I want the yellow container to be on top of the map container and also on top of the gray container, is that possible?. help please!
Here is the code:
CSS:
#map_canvas{
position: absolute;
top: 50px; left: 20px;
width: 300px;
height: 300px;
z-index: 1;}
#z_index_gray {
position: absolute;
top: 250px; left: 250px;
height: 125px; width: 125px;
background-color: gray;
z-index: 10;}
HTML:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>
<div id="z_index_gray"></div>
<p>
JS:
function initialize() {
var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);
var myMapOptions = {
zoom: 15
,center: secheltLoc
,mapTypeId: google.maps.MapTypeId.ROADMAP
};
var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
var marker = new google.maps.Marker({
map: theMap,
draggable: true,
position: new google.maps.LatLng(49.47216, -123.76307),
visible: true
});
var boxText = document.createElement("div");
boxText.style.cssText = "position: absolute;border: 1px solid black; background: yellow; padding: 5px;z-index: 20;height: 100px; width: 300px;";
boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: 1
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(5, 5)
,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);
}
$(document).ready(function() {
initialize();
});
JSFiddle: http://jsfiddle.net/MdhzR/
Thanks!
PD. I'm following this infoBox documentation example: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html
I found this example from Pamela Fox and it does exactly what I want.
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html
I hope it helps to someone else.