We Keep Coding

Using google maps JS api, how can I open an infowindow where the user clicks on the map? Is that possible?

Is it possible to open the infowindow right where the user clicks on the map?
Here's what I have right now:
OnClickMap(event) {
const map = this.state.map;
const title = this.props.createNewMarkerTitle;
const marker = {
latLng: {
lat: event.latLng.lat(),
lng: event.latLng.lng()
}
};
const markerOnMap = new google.maps.Marker({
position: marker.latLng,
map: map,
title: title
});
const infowindow = new google.maps.InfoWindow();
const content = document.createElement('div');
ReactDOM.render(this.renderCreateNewMarkerInfoWindow(), content);
infowindow.setContent(content);
markerOnMap.addListener('click', function() {
infowindow.open(map, markerOnMap);
});
}
I'm not sure how I can just click the map, and have the infowindow open on where I clicked. I tried messing around by removing the marker and just having the infowindow open, but that leads to the window opening in the top left since I am not sure how to pass the latLng to it.
Is this possible? Otherwise, how can I set up something where:
click the map ->
creates a marker ->
immediately opens infowindow (instead of having to click the marker to open it)

To open an InfoWindow at the location clicked on the map (without a marker), you need to set the .position property of the InfoWindow (and don't include the optional anchor in the .open call).
map.addListener('click', function(evt) {
var infowindow = new google.maps.InfoWindow();
infowindow.setPosition(evt.latLng);
var content = evt.latLng.toUrlValue(6);
infowindow.setContent(content);
infowindow.open(map);
});
proof of concept fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.addListener('click', function(evt) {
var infowindow = new google.maps.InfoWindow();
infowindow.setPosition(evt.latLng);
var content = evt.latLng.toUrlValue(6);
infowindow.setContent(content);
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, "load", initialize);
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"></div>

Google Maps API v3 - Add marker after initialize

My end-goal: Load only map markers within current map viewport and if map is moved, reload map markers within new viewport.
As far as I know, to do this I need the map corner coordinates which I can only load once the map is idle, that way I can pass these coords to my PHP file to query my database and output the XML for the map markers within the corners (I'm trying to reduce the stress on my DB by restricting the query to only the relevant map area). I'm having trouble adding a dummy marker post-initialize (see code below). It's simply not loading the marker, everything else works fine.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById("googleMap"), {
zoom: 12,
center: new google.maps.LatLng(40.779502, -73.967857)
});
google.maps.event.addListener(map, 'idle', function() {
/*bounds = map.getBounds();
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
window.top.showBounds();*/
TestMarker();
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
CentralPark = new google.maps.LatLng(40.779502, -73.967857);
addMarker(CentralPark);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

You don't need to wait for the idle event. The map bounds are available the first time the 'bounds_changed' event fires.
Wait for the bounds_changed event; whenever the bounds changes (including the first time), then update your markers on the map.
working fiddle
code snippet:
var map;
var bounds;
function initialize() {
map = new google.maps.Map(document.getElementById("googleMap"), {
zoom: 12,
center: new google.maps.LatLng(40.779502, -73.967857)
});
google.maps.event.addListener(map, 'bounds_changed', function() {
bounds = map.getBounds();
ne = bounds.getNorthEast();
sw = bounds.getSouthWest();
document.getElementById('mapBounds').innerHTML = bounds.toUrlValue(6);
TestMarker();
});
}
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
CentralPark = new google.maps.LatLng(40.779502, -73.967857);
addMarker(CentralPark);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="mapBounds"></div>
<div id="googleMap" style="border: 2px solid #3872ac;"></div>

Why don't you add another listener event inside your initialize function:
google.maps.event.addListener(map, 'dragend', function(){
var latlng = new google.maps.LatLng(35, -90);
var marker = new google.maps.Marker({
position: latlng
});
marker.setMap(map)
});

Google Maps Marker adding is very simple thing.I've created an example, for you.In this page there is some basic examples of google maps markers
http://www.w3docs.com/learn-javascript/google-maps-markers.html

How to add Overlaying rectangular SVG blinking border to a particular marker(center) on Google Maps

I have different Names and Latitude and logitude and now i want to highlight the particular marker with Blinking rectangular border, than we can add the SVG Code to the particular marker. But I don't know the SVG code Can any one suggest how to add.
How to add the Overlaying SVG blinking rectangular Border with Blinking to a particular marker,
<html>
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 1330px; height: 850px;"></div>
<script type="text/javascript">
var locations = [
STHOWBGA01_ATIF_RNID_L015,24.31026,93.56268,
SWKHMRID01_BILF_RNID_L039,25.65182,91.62737,
SMOKZUNB01_GTLF_RNID_L006,26.019,94.53,
SDIMSGRN01_ATCF_RNID_L023,25.8271,93.6853,
SKOHKRMA01_BILF_RNID_L010,25.5815,94.21959,
SMOKANGB01_BILF_RNID_L001,26.214,94.6876,
SDIMDIM087_ATIF_TTID_L026,25.8939,93.7602,
SWKHLYNKI1_GTLF_RNID_L061,25.5041,91.6109,
SIMWIMP109_ATCF_TTOD_L047,24.83982,93.97707,
SDIMZLUKI2_ATCF_RNID_L017,25.63998,93.66512,
GWTRTLMUR5_BILF_RNOD_L039,23.841,91.6202,
GWTRKLBRI1_BILF_RNOD_L017,23.50866,91.26185,
GWTRBXNGR1_BILF_RNOD_L033,23.61268,91.17243,
GWTRAGR101_BILF_TTOD_L055,23.8655,91.25584,
GWTRBIS007_BILF_RNOD_L022,23.6785,91.2963
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(24.31026,93.56268),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
google.maps.event.addDomListener(window, 'load', LatLng);
</script>
<div id="map-canvas"></div>
</body>
</html>
Please suggest,
Thanks.

You would need to create an SVG symbol as you desire first and then associate them with the markers. Although I think you would have to make the custom icon and embed it in the marker class because if you want to customize the marker icons you can only customize them as a whole and not just put border on it.
Here's the SVG docs to create your custom marker icon.
And, here's the sample code from Google to embed them in you marker class.
Hope this helped.

Google Maps API - InfoWindow not opening with custom marker icon

I've spent a few days trying to fix this to no avail. Any help would be appreciated.
I have a very simple Google map with one marker which when clicked zooms in and displays an infoWindow. My problem is that when I replaced the standard marker with a custom image marker, it zooms in but the infoWindow fails to appear. I've been using the Google API doco and a bit of cut & paste to get this.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-22.062160, 144.142205);
var mapOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.HYBRID,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'images/cccMap.png';
var myLatLng = new google.maps.LatLng(-22.062160, 144.142205);
var cccMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: 'Click to zoom to Orielton, Crown Cattle Company',
animation: google.maps.Animation.DROP
})
var infowindow = new google.maps.InfoWindow({
content:"<h1>Orielton</h1><p>Welcome to the center of Queensland.</p><p>View Photos or Videos</p>",
maxWidth: 200
});
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I'm sure it's something simple, but I could really use the help. Cheers.

You did it almost right. marker was undefined in click event listener:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
}
Change your event listener to:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(cccMarker.getPosition());
infowindow.open(map, cccMarker);
});
}
Here is the whole code at jsbin. Note: you will not see the pointer icon there because it is on my system and I do not know how to provide it. But you have the code to compare.
And here is the result from my system:

Your Code:
google.maps.event.addListener(cccMarker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,marker);
});
You are attempting to assign a marker "cccMarker" as first parameter, but it is assigned (as properly attempted) in the line infowindow.open(map,marker); – remove your first parameter of addListener() and properly assign it as "cccMarker" (you wrote "marker") in infowindow's open().
It should look like:
google.maps.event.addListener('click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
infowindow.open(map,cccMarker);
});
This way it should work properly.

How do I show white pop up box on custom Google Map?

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
});
}