I'm trying to get an infobox to open after clicking an overlay(custom HTML marker).
This map shows a typical marker and a customer HTML marker. When I click the typical marker, the infobox opens correctly. When I click the custom HTML marker, the infobox doesn't open with error msg: TypeError: anchor.getPosition is not a function. This relates to the incorrect parameters I'm passing to infobox.open(). It expects a marker, but since I'm clicking an overlay (custom HTML marker), the parameter passed is incorrect.
How can I adjust the infobox.open() function so that it accepts my overlay as a parameter?
<!DOCTYPE html>
<html>
<style>
#map{
height: 600px;
width: 600px;
}
</style>
<body>
<div id="map"></div>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script src="....path/to/custom-html-markers-google-maps.js"></script>
<script>
var infobox = new InfoBox({
disableAutoPan: false,
maxWidth: 300,
pixelOffset: new google.maps.Size(-75, -70),
zIndex: null,
boxStyle: {width: '150px'},
infoBoxClearance: new google.maps.Size(15, 50)
});
function initialize() {
var loc = new google.maps.LatLng(-33.89, 151.26);
var locMarker = new google.maps.LatLng(-33.89, 151.23);
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: loc,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//This works FINE.. It sets the marker and infobox listener
var marker = new google.maps.Marker({
map: map,
position: locMarker,
visible: true
});
google.maps.event.addListener(marker, 'click', function() {
infobox.setContent('<div style="background-color:yellow">This is<br>an infobox.</div>');
infobox.open(map, this);
});
//Overlay from: http://humaan.com/custom-html-markers-google-maps/
var overlay = new CustomMarker(loc, map, {marker_id: '123'});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Part of Custom HTML Marker script:
google.maps.event.addDomListener(div, "click", function(event) {
infobox.setContent('<div style="background-color:yellow">Hi there</div>');
infobox.open(map, this); //*******THIS IS THE PROBLEM********
google.maps.event.trigger(self, "click");
});
My problem is infobox.open(map, this); is expecting a marker and I give it the "div". How can I adjust this function so that it accepts my div?
Full script: http://humaan.com/custom-html-markers-google-maps/
To use anything as an anchor for a marker, it needs to expose a latLng position property and an optional anchorPoint property.
from the documentation:
open(map?:Map|StreetViewPanorama, anchor?:MVCObject)
Return Value: None
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.
I wasn't carrying the correct loc(lat/lng) and map into the function call.
Here is the revised listener:
google.maps.event.addDomListener(div, "click", function(event) {
var map = self.getMap();
var loc = self.latlng;
infobox.setContent('<div style="background-color:yellow">Hi there</div>');
infobox.openRevised(map, this, loc);
google.maps.event.trigger(self, "click");
});
Here is the revised infobox.open() function:
InfoBox.prototype.openRevised = function (map, anchor, loc) {
if (anchor) {
this.position_ = loc;
}
this.setMap(map);
};
Related
I want to completely remove the title tag when the user mouseovers on the marker. This is what I have tried so far.
jQuery("[title]").removeAttr("title");
jQuery("*").removeAttr("title");
Neither works.
I have referred to the below solutions also.
removing default mouseover tooltip from marker in google-maps
title of a marker of google map marker API
But could not find any solution that actually removes the title tag.
I have updated the script set properties: title: ''.
Updated
and it worked: http://jsfiddle.net/edf3gwuk/
var infowindow = new google.maps.InfoWindow();
function point(lat, long) {
var self = this;
self.name = name;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
title: '',
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'mouseover', function (e) {
e.mb.target.removeAttribute('title')
//infowindow.setContent(marker.title);
//infowindow.open(map, marker);
}.bind(this));
google.maps.event.addListener(marker, 'mouseout', function () {
infowindow.close();
}.bind(this));
}
var map = new google.maps.Map(document.getElementById('googleMap'), {
zoom: 5,
center: new google.maps.LatLng(55, 11),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
new point(58, 14);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false"></script>
<section id="Map">
<div id="googleMap" style="width:350px;height:600px;"></div>
</section>
my solution is set to the content of the label is empty
I'm trying to add a info window to each of my features in a Google Map. In the example from Google (https://developers.google.com/maps/documentation/javascript/infowindows) They add an info window directly to a marker. I don't have a explicit market to add my info window, instead I have a collection of data that I imported from a GeoJson file.
I can add a click listener to each feature, and create a new InfoWindow with the correct description. However, I get an error (b.get is not a function) when opening the InfoWindow.
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(28.7, -15.0),
mapTypeId: 'terrain'
});
map.data.loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson');
map.data.setStyle(function (feature) {
var magnitude = feature.getProperty('mag');
return {
icon: getCircle(magnitude)
};
});
map.data.addListener('click', function (event) {
var infowindow = new google.maps.InfoWindow({
content: event.feature.getProperty('place')
});
infowindow.open(map, event.feature);
});
The error I get with the posted code (once I include all the missing pieces) is Uncaught TypeError: b.get is not a function
The second parameter of the InfoWindow.open method is required to be a MVCObject that exposes a LatLng position property, the only one of which in the core API is a google.maps.Marker (not a event.feature)
from the documentation:
open(map?:Map|StreetViewPanorama, anchor?:*) | Return Value: None
Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any MVCObject that exposes a LatLng position property and optionally a Point anchorPoint property for calculating the pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the anchor's position to the tip of the InfoWindow.
The work around is to set the position of the InfoWindow:
map.data.addListener('click', function(event) {
var infowindow = new google.maps.InfoWindow({
content: event.feature.getProperty('place')
});
infowindow.setPosition(event.latLng);
infowindow.open(map);
});
proof of concept fiddle
code snippet:
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: new google.maps.LatLng(28.7, -15.0),
mapTypeId: 'terrain'
});
map.data.loadGeoJson('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson');
map.data.setStyle(function(feature) {
var magnitude = feature.getProperty('mag');
return {
icon: getCircle(magnitude)
};
});
map.data.addListener('click', function(event) {
var infowindow = new google.maps.InfoWindow({
content: event.feature.getProperty('place')
});
infowindow.setPosition(event.latLng);
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, "load", initMap);
// from google sample at: https://developers.google.com/maps/documentation/javascript/earthquakes
function getCircle(magnitude) {
return {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: .2,
scale: Math.pow(2, magnitude) / 2,
strokeColor: 'white',
strokeWeight: .5
};
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
I have the following code. In the section regarding the 'click' event I want to get the lang of the clicked-point but I have been unable to do so so far. What shall I do?
PROBLEM: I need to setCenter of the map to the newly clicked area.
<div id='map-container' style="width: 500px; height: 500px;">
</div>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(35.7, 51.3999)
};
map = new google.maps.Map(document.getElementById('map-container'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'موقعیت خود را انتخاب کنید'
});
google.maps.event.addListener(document.getElementById('map-container'), 'click', function() {
map.setZoom(10);
map.setCenter(35.7, 51.3999);
console.log(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
(1) To get the lat/lng of the point which is being clicked in Google Maps, you have to use click eventListener of Google Maps like
google.maps.event.addListener(map, 'click', function(event) {
});
(2) Then to get the position of the maps that is being clicked,
event.latLng //returns the position
event.latLng.ob //returns lat
event.latLng.pb //returns lng
(3) Now using setCenter(pos), mark the clicked area as map's center like
map.setCenter(event.latLng);
Finally,
google.maps.event.addListener(map, 'click', function(event) {
map.setCenter(event.latLng);
});
Sample Fiddle
EDIT: can you please also tell me how at the same time move the red marker to the newly clicked area?
google.maps.event.addListener(map, 'click', function (event) {
marker.setPosition(event.latLng); //set the position to marker
map.setCenter(marker.getPosition()); //Now set marker to map's center
});
Fiddle
I'm recently new in the google map api v3, and wanted to ask if there is any way I could trigger the street view mode just by clicking a link in my infoBox.
so far this is my code:
var map;
var marker;
var infowindow;
function HomeControl(controlDiv, map) {controlDiv.style.margin = '50px 0 0 0';}
function initialize() {
var location = new google.maps.LatLng(37.78391, -122.407157);
var mapOptions = {
center: location,
zoom: 18,
panControl: false,
scrollwheel: false,
zoomControl: false,
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
marker = new google.maps.Marker({position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
var boxText = document.createElement("div");
boxText.style.cssText = "margin-top: 26px; background: url('inc/images/infowindow-overlay.png') repeat left top; padding: 15px 20px;";
boxText.innerHTML = "<span class='pointing-arrow'></span><h2 class='adress-title'>San Francisco Center</h2><a href='#'>Centre Website</a><a href='#'>Street View</a>";
var myOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-5, 0),
zIndex: null,
boxStyle: {width: "280px"}
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var image = 'inc/images/westfield-marker-logo.png';
marker = new google.maps.Marker({
position: location,
map: map,
title: 'Westfield HQ',
draggable: true,
icon: image
});
//infowindow.open(map,marker);
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(18);
map.setCenter(marker.getPosition());
ib.open(map, this);
});
var ib = new InfoBox(myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
now what I want to do is that, in the part where I initialize the boxText, and add the mark-up, i want the street view anchor tag to initialize the street view onclick.
I've found some options in the documentation like centering the map to the marker by clicking external links, but couldn't find any to activate the street view on click.
The way to handle a click event on an element inside an InfoBox (or an InfoWindow) is a little convoluted.
Here's a JSFiddle to demonstrate how it's done. DEMO
Basically, you write your click handler like this:
google.maps.event.addDomListener(ib.content_,'click',(function(marker) {
return function() {
openStreetView(); // Here's where you activate the StreetViewPanorama
}
})(marker));
I didn't include details about how to activate a StreetViewPanorama through code, since there's plenty of information on that subject in the Google Maps JS API Docs.
EDIT
I just realized that this handler runs anytime you click anything inside the InfoBox which is not exactly what you asked for. To achieve exactly what you want (event handler on the 'Street View' link inside the InfoBox), I had to use a little jQuery. Here's the updated fiddle: DEMO
Here, you create the content of the InfoBox as a jQuery element, so you can bind a click handler to the 'Street View' link. (I gave #swl as an id to that link, so I could find it with jQuery.)
var boxObj = $("<div style='margin-top: 26px; background: url('inc/images/infowindow-overlay.png') repeat left top; padding: 15px 20px;'><span class='pointing-arrow'></span><h2 class='adress-title'>San Francisco Center</h2><a href='#'>Centre Website</a><a href='#' id='swl'>Street View</a></div>");
boxObj.find('#swl').on('click', function(){
openStreetView();
});
It's not the prettiest code (you should create a css class and move all style definitions under that class) but it gets the job done. I'm sure you can clean it up and make it production worthy :)
I currently have an array of places for a custom map that I am working on. I have been trying but cannot figure out how to add the 'click' popup box over a marker. I want the white box to display the name and have an option so that a person can choose 'get directions to here'. Does anyone know how I can achieve this with more then one marker?
<!DOCTYPE html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 50% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var map;
var marker
function initialize() {
var latlng = new google.maps.LatLng(42.098687,-75.917974);
var restaurants = new Array();
restaurants = [
new google.maps.LatLng(42.898687,-75.917974),
new google.maps.LatLng(42.698687,-73.917974),
new google.maps.LatLng(42.198687,-75.917974),
new google.maps.LatLng(41.098687,-75.917974)
];
var myOptions = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var i = 0;
for ( i <0; i < restaurants.length;i++ ){
var marker = new google.maps.Marker({
position: restaurants[i],
map:map,
title:"Testing!"
});
popupDirections(marker);
}
}
function popupDirections(marker) {
var infowindow = new google.maps.InfoWindow(
{ content: "tests: "
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>
The pop-up box that you are talking about is called the info window in google map language.
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("your contents");
});
The above code binds a click event with your marker and opens an info window with the specified text. here marker is the marker object.
Hope it helps.
The way to do this is to create one global infowindow and then reuse it again and again, this way the infowindow is just moved to each marker, and the content of the info window can be changed using the setContent method. Read here and there is a Google Demo accessable from the api reference site. I had the same problem when I was making a map for my site,
The following code should work:
<script type="text/javascript">
var map;
var marker;
var infowindow; //Global infowindow created
function initialize() {
var latlng = new google.maps.LatLng(42.098687,-75.917974);
var restaurants = new Array();
restaurants = [
new google.maps.LatLng(42.898687,-75.917974),
new google.maps.LatLng(42.698687,-73.917974),
new google.maps.LatLng(42.198687,-75.917974),
new google.maps.LatLng(41.098687,-75.917974)
];
var myOptions = {
zoom: 3,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
infowindow = new google.maps.InfoWindow({ //infowindow options set
maxWidth: 355
});
var i = 0;
for ( i <0; i < restaurants.length;i++ ){
marker = new google.maps.Marker({
position: restaurants[i],
map:map,
title:"Testing!"
});
popupDirections(marker);
}
}
function popupDirections(marker) {
//this function created listener listens for click on a marker
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent("Tests: "); //sets the content of your global infowindow to string "Tests: "
infowindow.open(map,marker); //then opens the infowindow at the marker
});
}
</script>
If you want separate content for each marker (which I assume you will) you can pass some content into the popupDirections() function, modified with a string for the content "html":
function popupDirections(marker, html) {
//this function created listener listens for click on a marker
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(html); //sets the content of your global infowindow to string "Tests: "
infowindow.open(map,marker); //then opens the infowindow at the marker
});
}