InfoWindow Undefined Google maps API - google-maps-api-3

I want to get the content property of the array place of interest, so below the if marker.content is giving me undefined then I create the new google.maps.InfoWindow
Code:
var map = null;
placesOfInterest = [
{ name: 'Charme da paulista', lat: -23.562172, lng: -46.655794, content:'<h1>Charme</h1>' },
{ name: 'The Blue Pub', lat: -23.563112, lng: -46.650338, content:'<h1>The Blue Pub</h1>' },
{ name: 'Veloso', lat: -23.585107, lng: -46.635219 },
{ name: 'Let\'s Beer', lat: -23.586508, lng: -46.641739 },
{ name: 'O\'Malley\'s', lat: -23.558296, lng: -46.665923 },
{ name: 'Finnegan\'s', lat: -23.559547, lng: -46.676794 },
{ name: 'Partisans', lat: -23.561049, lng: -46.682555 },
{ name: 'Morrison', lat: -23.555106, lng: -46.690883 },
{ name: 'Cão Véio', lat: -23.558130, lng: -46.679508 },
{ name: 'Cervejaria Nacional', lat: -23.564740, lng: -46.690641 },
{ name: 'Brewdog', lat: -23.561309, lng: -46.693935 },
{ name: 'Rei das Batidas', lat: -23.570613, lng: -46.705977 }
];
const customIcon = {
path: 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',
fillColor: '#F7B217',
fillOpacity: 0.98,
scale: 0.98,
strokeColor: '#666666',
strokeWeight: 3
};
function addMarker(marker) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(marker.lat, marker.lng),
icon: customIcon,
title: marker.name,
});
if(marker.content){
var infoWindow = new google.maps.InfoWindow({
content:marker.content
});
marker.addListener('click',function(){
infoWindow.open(map, marker)
});
}
}
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(-23.562172, -46.655794),
gestureHandling: 'greedy',
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP]
},
disableDefaultUI: true,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
}
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
//Adicionando o primeiro marcador como exemplo
for(var i = 0;i< placesOfInterest.length;i++ ){
addMarker(placesOfInterest[i]);
}
}

In your addMarker function, you are overwriting the input marker data with a new google.maps.Marker object, so the marker.content property never exists.
Rename either the input argument or the internal marker variable to avoid the conflict:
function addMarker(marker) {
var gmarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(marker.lat, marker.lng),
icon: customIcon,
title: marker.name,
});
if(marker.content){
var infoWindow = new google.maps.InfoWindow({
content:marker.content
});
gmarker.addListener('click',function(){
infoWindow.open(map, gmarker)
});
}
}
proof of concept fiddle
code snippet:
var map = null;
var placesOfInterest = [{
name: 'Charme da paulista',
lat: -23.562172,
lng: -46.655794,
content: '<h1>Charme</h1>'
}
];
const customIcon = {
path: 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',
fillColor: '#F7B217',
fillOpacity: 0.98,
scale: 0.98,
strokeColor: '#666666',
strokeWeight: 3
};
function addMarker(marker) {
var gmarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(marker.lat, marker.lng),
icon: customIcon,
title: marker.name,
});
if (marker.content) {
var infoWindow = new google.maps.InfoWindow({
content: marker.content
});
gmarker.addListener('click', function() {
infoWindow.open(map, gmarker)
});
}
}
function initMap() {
var mapOptions = {
center: new google.maps.LatLng(-23.562172, -46.655794),
gestureHandling: 'greedy',
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP]
},
disableDefaultUI: true,
scaleControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
}
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
//Adicionando o primeiro marcador como exemplo
for (var i = 0; i < placesOfInterest.length; i++) {
addMarker(placesOfInterest[i]);
}
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Related

Google Maps - infoWindow on mouseover of polygon

I created a polygon area on this page
I need to create an infoWindow that opens on mouseover. I found information on opening an infoWindow on mouseclick on markers but not on a polygon area.
<div id="map"></div>
<script>
// This is a simple polygon representing the MRPD Rescue Zone.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {lat: -16.4836, lng: 145.4653},
mapTypeId: 'terrain'
});
// Definition of the LatLng coordinates for the polygon's path.
var polygonCoords = [
{lat: -16.4836, lng: 145.4653},
{lat: -16.4500, lng: 145.4133},
{lat: -16.2319, lng: 145.4763},
{lat: -16.0878, lng: 145.4548},
{lat: -16.0454, lng: 145.9000},
{lat: -16.4861, lng: 146.1269},
{lat: -16.7229, lng: 145.6500},
{lat: -16.5913, lng: 145.5192},
];
// Construction of polygon.
var mrpdPolygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.6,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.10
});
mrpdPolygon.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_Key&callback=initMap">
</script>
add a mouseover and mouseout event to the polygon:
function mousefn(evt) {
infowindow.setContent("polygon<br>coords:" + bounds.getCenter().toUrlValue(6));
infowindow.setPosition(bounds.getCenter()); // or evt.latLng
infowindow.open(map);
}
google.maps.event.addListener(mrpdPolygon, 'mouseover', mousefn);
google.maps.event.addListener(mrpdPolygon, 'mouseout', function(evt) {
infowindow.close();
infowindow.opened = false;
});
proof of concept fiddle
code snippet:
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<div id="map"></div>
<script>
// This is a simple polygon representing the MRPD Rescue Zone.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: {
lat: -16.4836,
lng: 145.4653
},
mapTypeId: 'terrain'
});
// Construction of polygon.
var mrpdPolygon = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.6,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.10
});
mrpdPolygon.setMap(map);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < mrpdPolygon.getPath().getLength(); i++) {
bounds.extend(mrpdPolygon.getPath().getAt(i));
}
var infowindow = new google.maps.InfoWindow();
infowindow.opened = false;
function mousefn(evt) {
infowindow.setContent("polygon<br>coords:" + bounds.getCenter().toUrlValue(6));
infowindow.setPosition(bounds.getCenter());
infowindow.open(map);
}
google.maps.event.addListener(mrpdPolygon, 'mouseover', mousefn);
// google.maps.event.addListener(mrpdPolygon, 'mousemove', mousefn);
google.maps.event.addListener(mrpdPolygon, 'mouseout', function(evt) {
infowindow.close();
infowindow.opened = false;
});
}
// Definition of the LatLng coordinates for the polygon's path.
var polygonCoords = [{
lat: -16.4836,
lng: 145.4653
},
{
lat: -16.4500,
lng: 145.4133
},
{
lat: -16.2319,
lng: 145.4763
},
{
lat: -16.0878,
lng: 145.4548
},
{
lat: -16.0454,
lng: 145.9000
},
{
lat: -16.4861,
lng: 146.1269
},
{
lat: -16.7229,
lng: 145.6500
},
{
lat: -16.5913,
lng: 145.5192
},
];
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
you will add mouseover event to the div id "map"
JavaScript code:
//Select html element
const mapInfo = document.querySelector("#map");
//add mouseover event to the selected element
mapInfo.addEventListener ('mouseover', initMap);
Visit this https://developers.google.com/maps/documentation/javascript/infowindows link for more information. I hope this helps.

Add multiple points of interest on Google Map

I have a nice script that allows me to have 1 point of interest on a Google Map, but I would need much more POI (+- 15)
Could someone help me to adapt this script to enable multiple locations easily?
I frankly don't see yet what I have to do (as a newbie in this code)
I'm willing to switch to other code but I especially like the style that has been added to this code.
GOOGLE.map = function(){
if($('.map').length > 0)
{
$('.map').each(function(i,e){
$map = $(e);
$map_id = $map.attr('id');
$map_lat = $map.attr('data-mapLat');
$map_lon = $map.attr('data-mapLon');
$map_zoom = parseInt($map.attr('data-mapZoom'));
$map_title = $map.attr('data-mapTitle');
var latlng = new google.maps.LatLng($map_lat, $map_lon);
var options = {
scrollwheel: false,
draggable: false,
zoomControl: false,
disableDoubleClickZoom: false,
disableDefaultUI: true,
zoom: $map_zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var styles = [
{
stylers: [
{ hue: "#78dd3e" },
{ saturation: -100 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
var map = new google.maps.Map(document.getElementById($map_id), options);
var image = '_include/img/marker.png';
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: $map_title,
icon: image
});
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var contentString = '<p><strong>Light Falls</strong><br></p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
});
}
}
Thanks!

Converting google maps api v2 to v3 getting script error in main.js

I am converting my code from version 2 to version 3. I am getting script error in
http://maps.gstatic.com/intl/en_us/mapfiles/api-3/12/9/main.js
My code on the page is as
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&key=<%=strGk%>"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: "<%=strOrig%>",
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
}
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions"));
google.maps.event.addListener(directionsDisplay, "addoverlay", afterDir);
google.maps.event.addListener(directionsDisplay, "error", handleErrors);
// geocoder = new GClientGeocoder();
geocoder = new google.maps.Geocoder();
You are using the deprecated deprecated Navigation control
In V3 it is divided into separate Zoom and Pan controls. See documentation
TRY
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(55.91913101970850, -4.650520),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
//style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}

How to leave of the mode drawing before draw a circle in google maps

I'm trying to leave of the mode drawing after draw circle, I want to hide the controls drawingmanager and can edit the circle but I don't know how to do that after to draw the circle enter in mode, don't draw and can edit the circle
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(4.705, -74.113),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
//google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
//google.maps.drawing.OverlayType.POLYLINE,
//google.maps.drawing.OverlayType.RECTANGLE
]
},
//markerOptions: {icon: 'Images/marker_sprite.png'},
circleOptions: {
strokeColor: '#FF0000',
fillColor: '#DF0101',
fillOpacity: 0.3,
strokeWeight: 2,
editable:true
},
rectangleOptions: {
strokeColor: "#FF0000",
strokeWeight: 2,
fillColor: '#DF0101',
fillOpacity: 0.35,
editable:true
},
polygonOptions: {
strokeColor: "#FF0000",
strokeWeight: 2,
fillColor: '#DF0101',
fillOpacity: 0.35,
editable:true
}
});// Cierre variable drawingManager
drawingManager.setMap(map);
// event handler for drawingManager shapes
function setClickEvent(shape) {
google.maps.event.addListener(shape, 'click', function(){
//Colocar mensaje en Formato Dialgo UI
if(confirm('Desea Eliminar El Punto de Control')){
shape.setMap(null);
drawingManager.setOptions({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON
]
}
});
}
});
}
google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
radius = circle.getRadius();
centro = circle.getCenter();
document.getElementById("posicion").innerHTML=centro;
document.getElementById("radio").innerHTML=radius;
drawingManager.setOptions({
drawingControl: false
});
google.maps.event.addListener(circle, 'radius_changed', function(){
radius = circle.getRadius();
document.getElementById("radio").innerHTML=radius;
});
google.maps.event.addListener(circle, 'center_changed', function(){
centro = circle.getCenter();
document.getElementById("posicion").innerHTML=centro;
});
//drawingManager.setOptions({ drawingControl: false });
setClickEvent(circle);
});
/*
google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(Rectangle) {
var vertices = Rectangle.getBounds();
document.getElementById("posicion").innerHTML=vertices;
setClickEvent(Rectangle);
});
*/
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(Polygon) {
var vertices = Polygon.getPath();
var pocision="";
for (var i=0; i < vertices.length; i++){
var xy=vertices.getAt(i);
pocision += "<br>"+ xy.lng() +" , " + xy.lat();
document.getElementById("posicion").innerHTML=pocision;
}
google.maps.event.addListener(Polygon, 'mousedown', function() {
google.maps.event.addListener(Polygon.getPath(), 'set_at', function() {
console.log('editando');
vertices=Polygon.getPath();
pocision="";
for (var i=0; i < vertices.length; i++){
var xy=vertices.getAt(i);
pocision += "<br>"+ xy.lng() +" , " + xy.lat();
document.getElementById("posicion_Final").innerHTML=pocision;
}
});
});
});
}/* cierra inittalize() */
google.maps.event.addDomListener(window, 'load', initialize);
</script>
To make the circle so it can't be edited, set the editable option to false:
google.maps.event.addListener(drawingManager,'circlecomplete', function(circle){
radius = circle.getRadius();
centro = circle.getCenter();
document.getElementById("posicion").innerHTML=centro;
document.getElementById("radio").innerHTML=radius;
circle.setOptions({editable:false}); // <-- **** add this line
drawingManager.setOptions({
drawingControl: false
});
google.maps.event.addListener(circle, 'radius_changed', function(){
radius = circle.getRadius();
document.getElementById("radio").innerHTML=radius;
});
google.maps.event.addListener(circle, 'center_changed', function(){
centro = circle.getCenter();
document.getElementById("posicion").innerHTML=centro;
});
setClickEvent(circle);
});

Bring data in from the infowindow on Fusion Tables layers on a Google map

I'm building my first Fusion Tables, and bringing two Fusion Tables into a Google Map - one of polygons and one of points. Instead of displaying the regular info window when you click on a polygon or a point, I want to pull some data in from the Fusion Table, but it's failing to work:
<script>
function initialize() {
var england = new google.maps.LatLng(53.2, -2);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: england,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer1 = new google.maps.FusionTablesLayer({
query: {select: 'geometry', from: '1HgGUc72F2Wlp6dvy4GWvLyWrl1kC6aJhnM7jPyc'},
styles: [
{ where: "Score = 0", polygonOptions: { fillColor: "#cdcdcd", fillOpacity: 0.3 } },
{ where: "Score = 1", polygonOptions: { fillColor: "#FF0000", fillOpacity: 0.5 } },
{ where: "Score = 2", polygonOptions: { fillColor: "#FF7E00", fillOpacity: 0.5 } },
{ where: "Score = 3", polygonOptions: { fillColor: "#008000", fillOpacity: 0.5 } }],
options: {suppressInfoWindows: true},
map: map,
});
google.maps.event.addListener(layer1, 'click', function(e) {e.infoWindowHtml = "Score" + e.row['Score'].value;}
});
layer2 = new google.maps.FusionTablesLayer({
query: {select: 'postcode', from: '1bawAKwQAUGE4mzYSyw4lTbOcgp7MgIGOLROel8Y'},
options: {suppressInfoWindows: true},
map: map,
});
google.maps.event.addListener(layer2, 'click', function(e) {e.infoWindowHtml = "Postcode" + e.row['Postcode'].value;}
});
google.maps.event.addDomListener(window, 'load', initialize);
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas"></div>
</body>
</html>
It was all working well, infowindows suppressed, until I added the AddListener and addDomListeners. Can anyone help me get back on track, please?
You have syntax errors in your "new" code (two extra "}")
You have your call to addDomListener inside your initialize function (shouldn't matter as you still have it in the <body tag, but you really shouldn't have it both places.
<script>
function initialize() {
var england = new google.maps.LatLng(53.2, -2);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: england,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer1 = new google.maps.FusionTablesLayer({
query: {select: 'geometry', from: '1HgGUc72F2Wlp6dvy4GWvLyWrl1kC6aJhnM7jPyc'},
styles: [
{ where: "Score = 0", polygonOptions: { fillColor: "#cdcdcd", fillOpacity: 0.3 } },
{ where: "Score = 1", polygonOptions: { fillColor: "#FF0000", fillOpacity: 0.5 } },
{ where: "Score = 2", polygonOptions: { fillColor: "#FF7E00", fillOpacity: 0.5 } },
{ where: "Score = 3", polygonOptions: { fillColor: "#008000", fillOpacity: 0.5 } }],
options: {suppressInfoWindows: true},
map: map,
});
google.maps.event.addListener(layer1, 'click', function(e) {e.infoWindowHtml = "Score" + e.row['Score'].value;});
layer2 = new google.maps.FusionTablesLayer({
query: {select: 'postcode', from: '1bawAKwQAUGE4mzYSyw4lTbOcgp7MgIGOLROel8Y'},
options: {suppressInfoWindows: true},
map: map,
});
google.maps.event.addListener(layer2, 'click', function(e) {e.infoWindowHtml = "Postcode" + e.row['Postcode'].value;});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
working example
modified to make the infowindows from each layer work, using this function:
function openIW(FTevent) {
// infoWindow.setContent(FTevent.infoWindowHtml);
// infoWindow.setPosition(FTevent.latLng);
infoWindow.setOptions(
{
content: FTevent.infoWindowHtml,
position: FTevent.latLng,
pixelOffset: FTevent.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addListener(layer, 'click', function(e) {
console.log("E.Row! : "+ e.row['name'].value);
});

Resources