google maps info windows opening at extreme left instead of provided position

google maps info windows opening at extreme left instead of provided position - javascript

I am using google maps API to make some custom markers and i want to open a custom info window. I have been trying to set the position of the info window but its always opening on the extreme top left.
var markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
for (i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = markers[i][2];
marker[i] = infowindow = new google.maps.InfoWindow({
content: html,
pixelOffset: new google.maps.Size(200, 0)
});
marker[i] = new google.maps.Marker({
position: position,
icon: icon,
map: map,
}).addListener('mouseover', function() {
infowindow.open(map, marker[i]);
});
}

I think your problem lies how to create marker and info window in your code.To create multiple markers in map, see code below .
Fiddle demo
function initMap() {
var myLatLng = {
lat: 40.4173,
lng: -82.9071
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
for (i = 0; i < markers.length; i++) {
(function(markers) {
var position = new google.maps.LatLng(markers[0], markers[1]);
var icon = markers[2];
var infowindow = new google.maps.InfoWindow({
content: 'html',
pixelOffset: new google.maps.Size(200, 0)
});
var markerss = new google.maps.Marker({
position: position,
map: map,
//icon: icon,
});
google.maps.event.addListener(markerss, 'click', function() {
infowindow.open(map, markerss);
});
})(markers[i]);
}
}

marker[i] is not defined in this line:
infowindow.open(map, marker[i]);
Without a defined anchor, the infowindow ends up in the upper left hand corner of the map.
You can use this for the anchor in the mouseover event handler function:
infowindow.open(map, this);
You probably also want to remove the:
pixelOffset: new google.maps.Size(200, 0)
proof of concept fiddle
code snippet:
var geocoder;
var map;
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
});
var markers = [
[37.09024, -95.712891, "images/white-star.png"],
[40.4173, -82.9071, "images/purple-star.png"],
[31.9686, -99.9018, "images/yellow-star.png"],
];
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var html = "marker";
var position = new google.maps.LatLng(markers[i][0], markers[i][1]);
var icon = markers[i][2];
var infowindow = new google.maps.InfoWindow({
content: html,
// pixelOffset: new google.maps.Size(200, 0)
});
var marker = new google.maps.Marker({
position: position,
// icon: icon,
map: map,
}).addListener('mouseover', function() {
infowindow.open(map, this);
});
bounds.extend(position);
}
map.fitBounds(bounds);
}
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>

Related

How to define custom size on Google Map when using closures in event listeners

I' am using Google Map to plot the marker and a small popup box that will appear when someone clicks on the market. Image is attached. By Default, Google has set fixed width of the Popup and I wanted to change its size. I was not able to anything on Documentation.
Below are my codes
<script type="text/javascript">
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(-14.306407, -170.695018),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var voyagePlanCoordinates = [
new google.maps.LatLng(),
];
var voyagePath<?php echo $voyage_id; ?> = new google.maps.Polyline({
path: voyagePlanCoordinates,
geodesic: true,
strokeColor: "",
strokeOpacity: 1.0,
strokeWeight: 5
});
voyagePath.setMap(map);
setMarkers(map, voyages);
}
var voyages = [];
function setMarkers(map, locations) {
var image = {
url: '/wp-content/themes/theme/resources/images/marker.png',
size: new google.maps.Size(20, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(0, 32)
};
for (var i = 0; i < locations.length; i++) {
var voyage = locations[i];
var myLatLng = new google.maps.LatLng(voyage[1], voyage[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: voyage[0],
zIndex: voyage[3]
});
voyage_msg(marker, i);
}
}
function voyage_msg(marker, num){
var message = [];
var infowindow = new google.maps.InfoWindow({
content: message[num]
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Please Help!

You don't need any extra code or api call to set the width of the popover. All you need is basic CSS
.map-closures{
width: 200px;
}
That should do the trick.

Saving a marker on Google Maps API on restart/refresh, after it's been dragged by user

below is my code, where I've created a geolocation marker and a marker which the user can drag around the map.
I'm wondering what I need to do in order to keep the location of the dragged marker, if the user refreshes. Below is my code:
function initialize() {
var locations = [
['Your Hostel Is Here', 54.911615,-1.377025,],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(54.911615,-1.377025),
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,
draggable: true
});
localStorage.setItem('marker', marker);
var retrievedmarker = localStorage.getItem('marker');
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
// Check if user support geo-location
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var geolocpoint = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
zoom: 8,
center: geolocpoint,
mapTypeId: google.maps.MapTypeId.HYBRID
}
// Place a marker
var geolocation = new google.maps.Marker({
position: geolocpoint,
map: map,
title: 'Your geolocation',
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);

You need to store the lat long value of a marker object in string, rather than the object. Furthermore, your need to listen to the marker mouseup event to store the marker value for later display.
Add this event:
//Record the new marker position
google.maps.event.addListener(marker, 'mouseup', function() {
localStorage.setItem('marker', marker.position.lat() + "," + marker.position.lng());
var retrievedmarker = localStorage.getItem('marker');
});
Edit the following code section:
//Get the last recorded marker position for display
var retrievedmarker = localStorage.getItem('marker');
mylatlng = retrievedmarker.split(",");
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
//position: new google.maps.LatLng(locations[i][1], locations[i][2]),
position: new google.maps.LatLng(mylatlng[0], mylatlng[1]),
map: map,
draggable: true
});
Note: I didn't check for the localStorage key existence, please make sure you check for it before the value retrieval.

Calculate the center point of multiple Lat/Long

I am using Google Map to display multiple lat/long points.
But the Google map Javascript code has the code snippet to track the center of lat/long of the available lat/long.
<script type="text/javascript">
var locations = JSON.parse('<?php echo json_encode($data);?>'); //alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(),
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][2], locations[i][3]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
In Above code the line
center: new google.maps.LatLng(),
needs a lat/long pair which could be the center point of multiple lat/long to be displayed.
How could that be done?

This works. See the documentation of Map.fitBounds and LatLngBounds for details:
<script type="text/javascript">
var locations = JSON.parse('<?php echo json_encode($data);?>');//alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2],locations[i][3]),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
</script>
code snippet:
var locations = JSON.parse(
JSON.stringify([
['AAA', 'BBB', 42, -72],
['BBB', 'CCC', 42.1, -72.2]
])); //alert (locations);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

You should get the bounds of your added markers with the function map.getBounds().
It returns an object on which you can get the center bound.getCenter().
See Find center of multiple locations in Google Maps

How to make buttons to hide and show markers?

In Google maps, I want to have buttons that will hide and show map markers, but I need to have multiple buttons, each with their own set of markers. For example, button 1 would show and hide markers 1 and 3, while button 2 would show and hide markers 2 and 4.
It's kinda hard for me cause I'm new in api v3.
Here is my code.
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(-8.762472, -63.887951),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP });
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-8.759662,-63.906489),
icon: predio});
var infowindow = new google.maps.InfoWindow({
content:contentimage})
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker); });
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(-8.766159,-63.889567),
icon: yellow});
var infowindow1 = new google.maps.InfoWindow({
content:contentimage1})
google.maps.event.addListener(marker1,'click',function(){
infowindow1.open(map,marker1); });
}

You may like this
A Working Example Here.
function init()
{
// Icon urls for 4 icons
var bell="http://image1.png", cam="http://image2.png",
black="http://image3.png", green="http://image4.png";
// Image urls for 4 images
conimg1="http://contentImage1.jpg", conimg2="http://contentImage2.jpg",
conimg3="http://contentImage3.jpg", conimg4="http://contentImage4.jpg",
var map,
locations = [
[42.82846160000000000000, -76.53560419999997000000, bell, conimg1],
[43.65162010000000000000, -77.73558579999997000000, black, conimg2],
[44.75846240000000000000, -78.22252100000003000000, cam, conimg3],
[41.71773540000000000000, -75.74897190000002000000, green, conimg4]
],
myOptions = {
zoom: 6,
center: new google.maps.LatLng(locations[0][0], locations[0][1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i, markers=[];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map,
icon: locations[i][2],
visible:true
});
markers.push(marker)
google.maps.event.addListener(marker, 'click',(function(marker, i){
return function() {
var img="<img class='contentImage' src='"+locations[i][3]+"' />";
infowindow.setContent(img);
infowindow.open(map, marker);
}
})(marker, i));
}
var btn1=document.getElementById('btn1');
google.maps.event.addDomListener(btn1, 'click', function(){
if(markers[0].visible)
{
this.innerHTML="Show Icons (1 and 2)";
this.className="btn";
markers[0].setVisible(false);
markers[1].setVisible(false);
}
else
{
this.innerHTML="Hide Icons (1 and 2)";
this.className="btn btn-primary";
markers[0].setVisible(true);
markers[1].setVisible(true);
}
});
var btn2=document.getElementById('btn2');
google.maps.event.addDomListener(btn2, 'click', function(){
if(markers[2].visible)
{
this.innerHTML="Show Icons (3 and 4)";
this.className="btn";
markers[2].setVisible(false);
markers[3].setVisible(false);
}
else
{
this.innerHTML="Hide Icons (3 and 4)";
this.className="btn btn-primary";
markers[2].setVisible(true);
markers[3].setVisible(true);
}
});
}

Google Maps: Only one infowindow created for multiple markers

Here is my fiddle link.
I added markers to the maps, also infowindows for every marker.
But only one infowindow appears?

Here you go:
var ships = [['63.44204833', '10.40340333'], ['63.49261667', '9.92661167'], ['63.43243500', '10.37030833'], ['63.43896000', '10.40036167'], ['63.64856000', '10.67950167'], ['63.43330667', '10.36608000'], ['63.43840500', '10.40874000'], ['63.78920833', '11.19232167'], ['63.45155667', '10.20245833'], ['63.43366667', '10.36150000'], ['63.43956667', '10.40019333'], ['63.47066500', '10.33613500'], ['63.43928333', '10.40971667'], ['63.43822000', '10.39873167']];
var map;
var infowindow = new google.maps.InfoWindow({
content: 'bla'
});
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(63.65, 10.65);
var myOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function createMarker(lat, lon, html) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: html
});
createInfoWindow(marker);
}
function createInfoWindow(m) {
google.maps.event.addListener(m, 'click', function() {
infowindow.open(map, m);
});
}
function processShips(ships) {
for (var i = 0; i < ships.length; i++) {
createMarker(ships[i][0], ships[i][1], 'bla');
}
}
function load(ships) {
initialize();
processShips(ships);
}
load(ships);
Working example.

Simply add var in front of marker in your createMarker function
var marker = new google.maps.Marker({....

Develop Reference

JavaScript is the programming language of the Web.

google maps info windows opening at extreme left instead of provided position - javascript

Related

How to define custom size on Google Map when using closures in event listeners

Saving a marker on Google Maps API on restart/refresh, after it's been dragged by user

Calculate the center point of multiple Lat/Long

How to make buttons to hide and show markers?

Google Maps: Only one infowindow created for multiple markers

Categories

Resources