Unable to show the latitude and longitude in the InfoWindow - google-maps-api-3

I have a java script function which I am using to display a marker on the selected position of the map and also show the latitude and longitude at the marker's location in a InfoWindow.
I could display the marker at any location but unable to show a InfoWindow with the coordinates.
This is the function:
function init()
{
var mapoptions=
{
center: new google.maps.LatLng(17.379064211298, 78.478946685791),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map=new google.maps.Map(document.getElementById("map_can"), mapoptions);
var marker;
google.maps.event.addListener(map,'click',function(event)
{
marker= new google.maps.Marker({position:event.latLng,map:map});
});
var iwindow= new google.maps.InfoWindow();
google.maps.event.addListener(marker,'click',function(event)
{
iwindow.setContent(event.latLng.lat()+","+event.latLng.lng());
iwindow.open(map,marker);
});
}
Where am I wrong? Suggestions please.

This is because you attach event to an empty marker object (it is unassigned at the moment when you invoke
google.maps.event.addListener(marker,'click',function(event) { ... });
Try attaching click event to the marker after you create it, e.g.:
google.maps.event.addListener(map,'click',function(event)
{
marker= new google.maps.Marker({position:event.latLng,map:map});
google.maps.event.addListener(marker,'click',function(event)
{
iwindow.setContent(event.latLng.lat()+","+event.latLng.lng());
iwindow.open(map,marker);
});
});

You can try this snipped code :
function addMarkerWithTimeout(position, timeout, id) {
window.setTimeout(function () {
markers.push(new google.maps.Marker({
position: position,
map: map,
icon: image1,
title: "whatever!",
draggable: true,
animation: google.maps.Animation.ROUTE
}));
google.maps.event.addListener(map, 'click', function (event)
{
google.maps.event.addListener(markers[id], 'click', function (event)
{
infoWindow.setContent(event.latLng.lat() + "," + event.latLng.lng());
infoWindow.open(map, markers[id]);
});
});
}, timeout);
}

Related

Trying to find error why map isn't centered when resize window

I'm using a dom listener to set the center of the map when a user is resizing the window, but i'm confused because nothing happens!? What have I missed? Every thing else works fine with the map in responsive design. Help is preciated.
If someone is wondering why I have this code {$mapPoints} this is a PHP string of all markers.
EDIT 2:
At start I have the markers in the center of the map. Then I pan the map and the markers isn't in the center any more. When I resize the window I want the markers at the center of the map as it was from the beginning (55.678939, 12.568359). Have I miss understodd something or isn't this possible? I have also tried to set the center of the map to the these coordinates when resizing the window.
EDIT 1:
CSS for the map:
#map_canvas
{
width: 100%;
height: 350px;
margin: 20px 0 20px 0px;
}
var map = null;
var infowindow = new google.maps.InfoWindow();
var iconBase = 'images/mapNumbers/number';
function initialize() {
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(55.678939, 12.568359),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function () {
infowindow.close();
});
google.maps.event.addListener(map, 'zoom_changed', function () {
infowindow.close();
});
google.maps.event.addDomListener(window, 'resize', function() {
//map.setCenter(55.678939, 12.568359);
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
// Add markers to the map
var point;
{$mapPoints}
}
// Create markers
function createMarker(latlng, html, name, number) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name,
icon: iconBase + number + '.png'
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(html);
infowindow.open(map, marker);
//map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
It seems that at the beginning you almost got it right. I did the following changes:
function initialize() {
var markerPos = new google.maps.LatLng(55.678939, 12.568359);
var myOptions = {
center: markerPos,
...
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
var marker = new google.maps.Marker({
position: markerPos,
...
});
google.maps.event.addDomListener(window, 'resize', function() {
console.log('window resize');
map.setCenter(markerPos);
var center = map.getCenter();
console.log(center);
// google.maps.event.trigger(map, 'resize');
});
Test should be like you wrote: load the map, pan to the left/right, resize the window. Marker and the map should be centered.
Take a look at the bounds_changed event:
google.maps.event.addListener(map, 'bounds_changed', function() {
//do really cool stuff and change the world or at least a map of it
}

How to add a marker on a groundoverlay by a click?

I developed a map application using gmap2. I used a groundoverlay (a temperature map) to help users to determine the location of interest and click to select. After gmap2 being replaced by gmap3, it stops working. The bigger problem is that I could not find a way to add markers on the groundoverlay by clicking in gmap3. Someone raised a similar question, but no answer has been available. I hope that such a function is not lost in gmap3. Your help is appreciated.
enter code here
<script>
var map;
var mapCenter = new google.maps.LatLng(54.508742, -125.120850);
var pngBounds = new google.maps.LatLngBounds(new google.maps.LatLng(48.3367, -139.0402),
new google.maps.LatLng(59.99008, -114.1095));
function initialize() {
var mapProp = { center: mapCenter, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var groundoverlay = new google.maps.GroundOverlay(
"http://www.genetics.forestry.ubc.ca/cfcg/ClimateBC40/overlays/climate/MAT_1961_1990.png", pngBounds);
groundoverlay.setMap(map);
google.maps.event.addListener(map, 'click', function (event) { placeMarker(event.latLng); });
}
function placeMarker(location) {
var marker = new google.maps.Marker({ position: location, map: map, draggable: true });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
In v3 you have to make the groundOverlay non-clickable
var groundoverlay = new google.maps.GroundOverlay(
"http://www.genetics.forestry.ubc.ca/cfcg/ClimateBC40/overlays/climate/MAT_1961_1990.png", pngBounds, **{clickable:false}**);
use below code as simple as that..
let overlayGeoMapImg = new google.maps.GroundOverlay(
'../assets/GNDVI.png',
imageBounds);
overlayGeoMapImg.setMap(map);
google.maps.event.addListener(overlayGeoMapImg, 'click', (event: any) => {
this.ngZone.run(() => {
marker = new google.maps.Marker({
position: event.latLng,
map: map,
title: 'Hello World!'
});
});
});

KML file more than 2000 placemarks

I want to import kml files that contains more than 2000 placemarks into googla map.
I use google api v3.
I can only show 200 placemarks.
I know that I can use more layers, but I want only one because I have to refresh it weekly and I don't want to split every time.
Thanks for your replays
THIS IS THE CODE:
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(47.25,19.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
loadKmlLayer(map);
}
function loadKmlLayer(map) {
var ctaLayer2 = new google.maps.KmlLayer('https://.../asdf.kml', {
suppressInfoWindows: false,
preserveViewport: false,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
If your KML isn't very complex, you could try rendering it with a third-party KML parser (geoxml3 or geoxml-v3), see if that works (or points to the problem you are having with KmlLayer)
(function() {
window.onload = function() {
// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.10,19.5),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Creating the JSON data
var json = [
DATA HERE LIKE:
{"title" :"City ZIP CODE STREET" , "lat" :47.2876 , "lng" :20.4978 ,"description" :"YOUR DESCRIPTION"},
]
// Creating a global infoWindow object that will be reused by all markers
var infoWindow = new google.maps.InfoWindow();
// Looping through the JSON data
for (var i = 0, length = json.length; i < length; i++)
{
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title,
// icon: iconimage
});
// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {
// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})
//OnClick event
(marker, data);
}
} })();

How do you activate an existing marker to show its infowindow on clicking a separate link in Google Maps v3?

I currently have created markers but I want to be able focus/show the marker's infowindow on click of a separate list of those marker names. How do you accomplish this? I couldn't find anything online.
javascript:
<script type="text/javascript">
var infowindow;
var locations = { 0: { lat: 32.42, long: -99.68, name: 'Taylor Swift', info: '<b>Taylor Swift</b><br/><img src="http://www.8notes.com/images/artists/taylor_swift.jpg" width="50">' },
1: { lat: 35.42, long: -95.68, name: 'Lady Gaga', info: '<b>Lady Gaga</b><br/><img src="http://images2.fanpop.com/images/photos/7500000/L-G-lady-gaga-7557892-500-500.jpg" width="50">' },
2: { lat: 37.78, long: -122.32, name: 'Selena Gomez', info: '<b>Selena Gomez</b><br/><img src="http://videokeman.com/image/pics/SelenaGomezsongPics1YnhHMtsn4mUdCM.jpg" width="50">' }
}
var myLatlng = new google.maps.LatLng(locations[0].lat,locations[0].long);
var myOptions =
{
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_container"), myOptions);
var markerBounds = new google.maps.LatLngBounds();
$.each(locations, function(key, value)
{
var location = new google.maps.LatLng(value.lat,value.long);
var marker = new google.maps.Marker({
position: location,
map: map,
title:value.name
});
markerBounds.extend(location);
map.fitBounds(markerBounds);
attachSecretMessage(marker, value);
});
function attachSecretMessage(marker,value)
{
google.maps.event.addListener(marker, 'click', function()
{
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow(
{ content: value.info,
size: new google.maps.Size(50,50)
});
infowindow.open(map,marker);
});
}
</script>
html body:
<body>
<a id="showTaylorSwiftInfoWindow" href="#">Taylor Swift</a>
<a id="showLadyGagaInfoWindow" href="#">Lady Gaga</a>
<a id="showSelenaGomezInfoWindow" href="#">Selena Gomez</a>
</body>
You would need to hold all your Markers in an Array so you could search through that and find the appropriate Marker. Once you have that you can call the click event handler, or just make the infowindow and open it as you do in the event handler.
But the important part is that you keep your markers in an Array because that is the only way you will be able to reference them again after they have been created.

set a google marker in sencha touch

I have some problem when i set a marker, I found out this code for generate a google map and it works. But now i want to set a marker with my current position, and the problem is that i don't know where is the google map object, without this the marker isn't displayed.
this.mapg = new Ext.Map({
useCurrentLocation:true,
geo:new Ext.util.GeoLocation({
autoUpdate:true,
timeout:2000,
listeners:{
locationupdate: function(geo) {
center = new google.maps.LatLng(geo.latitude, geo.longitude);
// Set the marker
marker = new google.maps.Marker({
map:geo.map,//??? No idea where is the google map object
position: center
});
if (this.rendered)
this.update(center);
else
this.on('activate', this.onUpdate, this, {single: true, data: center});
},
locationerror: function(geo){
alert('got geo error');
}
}
})
});
After spending a day searching trough google, i founded this solution:
ascom.views.MapG = Ext.extend(Ext.Panel, {
layout:'card',
initComponent: function(){
var infowindow = new google.maps.InfoWindow({
content: 'prova'
});
this.map = new Ext.Map({
mapOptions : {
zoom: 12,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
useCurrentLocation: true,
listeners: {
maprender : function(comp, map){
var marker = new google.maps.Marker({
position: map.center,
title : 'Infofactory HQ',
map: map
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
}
});
this.panel = new Ext.Panel({
layout:'fit',
items:this.map,
dockedItems:[
{
xtype:'toolbar',
title:'Map GO'
}
]
});
this.items = this.panel;
ascom.views.MapG.superclass.initComponent.call(this);
}
});
It's in:
mapg.map
You don't show what mapg is a member of but you could access it explicitly.

Resources