I am having some difficulties with getting tabbed info windows to appear for paths. I have followed this tutorial.
I have a KML layer with polylines (they curve - represent topographic features)
and do not know how to get the info window to appear when you click on a path. I've seen some tutorials on calculating midpoints (but of straight lines)..
2 ways (of many) I've tried to get path points:
var streamPoly = google.maps.Polyline.prototype.getPosition = function() {
return this.getPath().getAt(0);}
var streamPoly = poly.getPath();
What's in my header:
var map;
var streamPoly;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(42.687984,-79.394159);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'paths.kml'
});
ctaLayer.setMap(map);
ctaLayer.set('preserveViewport', true);
var infoBubble = new InfoBubble({
maxWidth: 300
});
var div = document.createElement('DIV');
div.innerHTML = 'Hello';
infoBubble.addTab('Tab 1', div);
infoBubble.addTab('Tab 2', "<B>This is tab 2</B>");
google.maps.event.addListener(streamPoly, 'click', function() {
if (!infoBubble.isOpen()) {
infoBubble.open(map, streamPoly);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can't access polylines in a KmlLayer as google.maps.Polyline objects. To open an InfoWindow (or an InfoBubble) on a KmlLayer, you need to add a listener to the KmlLayer:
google.maps.event.addListener(ctaLayer, 'click', function(evt) {
if (!infoBubble.isOpen()) {
infoBubble.setPosition(evt.latLng);
infoBubble.open(map);
}
});
evt will be a KmlLayerMouseEvent which will contain information about the feature clicked
Related
I have created an application that allows a user to plot a flag on google maps upon a click event although once the page is refreshed all of flags are lost. I want to be able to keep the data the user has input using local storage, can anyone point me in a direction or show me sample code of how they would handle this problem? thanks.
Basic google maps code without local storage
var map;
var myCenter=new google.maps.LatLng(54.906435, -1.383944);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
//creating the event for placing the marker
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
//Funcion to place the marker on the map (flag)
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
icon:'flag.png',
map: map,
});
//open information window once marker is placed
var infowindow = new google.maps.InfoWindow({
content: 'User has placed warning'
});
infowindow.open(map,marker);
//zoom into the marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(17);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
This should do the trick ;)
function initialize()
{
var mapProp = {
center:myCenter,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
//creating the event for placing the marker
google.maps.event.addListener(map, 'click', function(event) {
writeToStorage(event.latLng);
placeMarker(event.latLng);
});
setupStorage();
readFromStorage();
}
function setupStorage() {
if(typeof(localStorage) === "undefined") {
// If localStorage isn't supported, fake it.
// Won't persist between sessions.
localStorage = {};
}
localStorage.locations = localStorage.locations || [];
}
function writeToStorage(location) {
localStorage.locations.push(location);
}
function readFromStorage() {
localStorage.locations.forEach(function(location) {
placeMarker(location);
});
}
//Funcion to place the marker on the map (flag)
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
icon:'flag.png',
map: map,
});
//open information window once marker is placed
var infowindow = new google.maps.InfoWindow({
content: 'User has placed warning'
});
infowindow.open(map,marker);
//zoom into the marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(17);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Let me know if you have any trouble understanding any of it.
var map = {};
var polyOptions = {};
$(document).ready(function () {
map = new google.maps.Map(document.getElementById('MapDiagram'), {
zoom: 5.4,
center: new google.maps.LatLng(40, -10),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: true
});
polyOptions = {
strokeWeight: 0,
fillOpacity: 0.45,
editable: true
};
});
map.setCenter(new google.maps.LatLng(coord1, coord2));
I am trying to plot on a google map a set of fixed markers and a marker for the user position. For these two sets of markers I would like to use a different image for the marker, however something weird is happening: when loading the page, the "fixed" markers get plotted properly but then immediately one disappears (the last one in the array) and then the user position shows up. In addition, the first fixed location gets the user location marker image, and the user positioning marker gets the image of the fixed markers. Ideally, the locations in the array will be plotted entirely (all 4) and with red_dot.png image on the marker, and the user positioning with the bluedot_retina.png on the marker.
It's really strange and I am struggling figuring out what is the root cause. Appreciate any help with this issue. thanks!
<script>
var locations = [
['location a', 37.60756088, -122.42793323],
['location b', 37.759736, -122.426957],
['location c', 37.752950, -122.438458],
['location d', 37.763128, -122.457942]
];
var map;
var i;
var marker;
var google_lat = 37.757996;
var google_long = -122.404479;
var myLatlng = new google.maps.LatLng(google_lat, google_long);
//google.maps.visualRefresh = true;
function initialize() {
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image_dot = new google.maps.MarkerImage(
'images/red_dot.png',
null, // size
null, // origin
new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
new google.maps.Size( 8, 8 ) // scaled size (required for Retina display icon)
);
marker = new google.maps.Marker({
flat: true,
position: myLatlng,
icon: image,
optimized: false,
map: map,
visible: true,
title: 'I might be here'
});
setMarkers(map, locations);
} //initialize();
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng1 = new google.maps.LatLng(beach[1], beach[2]);
marker = new google.maps.Marker({
position: myLatLng1,
icon: image_dot,
map: map
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
var Tdata;
var image = new google.maps.MarkerImage(
'images/bluedot_retina.png',
null, // size
null, // origin
new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
);
var userMarker = new google.maps.Marker({icon: image});
//var userMarker = new google.maps.Marker({icon: 'images/bluedot_retina.png'});
$.ajax({
method : "GET",
url: "get_location.php",
success : function(data){
Tdata=JSON.parse(data);
// console.log(data.lat);
console.log(Tdata.lat);
myFunction();
}
});
function myFunction(){
var interval = setInterval(function() {
$.get("get_location.php", function(Tdata) {
var JsonObject= JSON.parse(Tdata);
google_lat = JsonObject.lat;
google_long = JsonObject.long;
console.log(google_lat, google_long);
// $('#data').html('google_lat, google_long');
myLatlng = new google.maps.LatLng(google_lat, google_long);
//marker.setPosition(myLatlng);
userMarker.setPosition(myLatlng);
userMarker.setMap(map);
//map.setCenter(myLatlng);
});
}, 1000);
}
</script>
marker is a global variable. You are using it for both all of your locations and your user's position marker. Don't do that, assign unique (or local) names to the two classes of markers.
var Tdata;
var userMarker = new google.maps.Marker({icon: URL/to/custom/icon/for/user});
$.ajax({
method : "GET",
url: "get_location.php",
success : function(data){
Tdata=JSON.parse(data);
// console.log(data.lat);
console.log(Tdata.lat);
myFunction();
}
});
function myFunction(){
var interval = setInterval(function() {
$.get("get_location.php", function(Tdata) {
var JsonObject= JSON.parse(Tdata);
google_lat = JsonObject.lat;
google_long = JsonObject.long;
console.log(google_lat, google_long);
// $('#data').html('google_lat, google_long');
myLatlng = new google.maps.LatLng(google_lat, google_long);
userMarker.setPosition(myLatlng);
userMarker.setMap(map);
map.setCenter(myLatlng);
});
}, 1000);
}
I am building a Google Maps based web app on which I plot a moving dot of the user location. I am fetching continuously the user location from a server and would like to use the current user location when loading the map to center the window around it, meaning, when the user loads the site, the map will be centered around the first lat/long fetched from the server but enable the user to pan the map afterwards without re-centering it around where the user is. I was able to keep the map centered constantly around the user location but can't figure out how to use the first fetched location to center the map during initialization. My code is below, any help would be greatly appreciated. Thanks!
<script>
var locations = [
['location a', 37.771678, -122.469357],
['location b', 37.768557, -122.438458],
['location c', 37.755121, -122.438973],
['location d', 37.786127, -122.433223]
];
var map;
var i;
var marker;
var google_lat = 37.722066;
var google_long = -122.478541;
var myLatlng = new google.maps.LatLng(google_lat, google_long);
var image_dot = new google.maps.MarkerImage(
'images/red_dot.png',
null, // size
null, // origin
new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
new google.maps.Size( 8, 8 ) // scaled size (required for Retina display icon)
);
function initialize() {
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(map, locations);
} //initialize();
function setMarkers(map, locations) {
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng1 = new google.maps.LatLng(beach[1], beach[2]);
marker = new google.maps.Marker({
position: myLatLng1,
icon: image_dot,
map: map
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
var Tdata;
var image = new google.maps.MarkerImage(
'images/bluedot_retina.png',
null, // size
null, // origin
new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
);
var userMarker = new google.maps.Marker({icon: image});
$.ajax({
method : "GET",
url: "get_location.php",
success : function(data){
Tdata=JSON.parse(data);
myFunction();
}
});
function myFunction(){
var interval = setInterval(function() {
$.get("get_location.php", function(Tdata) {
var JsonObject= JSON.parse(Tdata);
google_lat = JsonObject.lat;
google_long = JsonObject.long;
myLatlng = new google.maps.LatLng(google_lat, google_long);
userMarker.setPosition(myLatlng);
userMarker.setMap(map);
//map.setCenter(myLatlng); --> this is not what I want since it will always keep the map centerd around the user
});
}, 1000);
}
</script>
Only set the map center the first time. One way of detecting the first time would be to create the "userMarker" the first time the data is loaded.
var userMarker;
$.ajax({
method : "GET",
url: "get_location.php",
success : function(data){
Tdata=JSON.parse(data);
myFunction();
}
});
function myFunction(){
var interval = setInterval(function() {
$.get("get_location.php", function(Tdata) {
var JsonObject= JSON.parse(Tdata);
google_lat = JsonObject.lat;
google_long = JsonObject.long;
myLatlng = new google.maps.LatLng(google_lat, google_long);
if (!userMarker || !userMarker.setPosition) {
// create the marker
userMarker = new google.maps.Marker({
icon: image,
position: myLatlng,
map:map
});
// center the map the first time, when the marker is created
map.setCenter(myLatlng);
} else { // marker aleady exists
userMarker.setPosition(myLatlng);
}
});
}, 1000);
}
proof of concept fiddle
Why is it that only the first (one only) InfoWindow showing on Google Map? I want all of the pinned address show InfoWindow.
I already searched for answers like Only the first marker showing on google map , Google Maps API InfoWindow only showing the first location for all the markers and Google maps-api v3 InfoWindow automatically open on page load but still no luck.
here is my code.
$scope.initialise = function(){
$http.get('http://remoteapi.com/' + $scope.name)
.success(function(data)
{
var myLatlng = new google.maps.LatLng(8.4844173, 124.6526134);
var mapOptions = {
center: myLatlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for( var i in data ) {
var position = new google.maps.LatLng(data[i].lat, data[i].lon);
marker = new google.maps.Marker({
position: position,
map: map,
content: data[i].description
});
var infowindow = new google.maps.InfoWindow({
content: "<img style='max-width:50px;max-height50px;' src='images/"+data[i].image+"'>"
});
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
});
};
google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
I ahve just started using the Goggle Maps API and I have followed all of the instructions but for some reason the Map shows but the Marker to show the specific location is not displaying.
Below is the code I'm using:
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var myLatIng = new google.maps.LatLng(-1.288902, 36.806304);
var map_options = {
center: myLatIng,
zoom: 19
}
var map = new google.maps.Map(map_canvas, map_options);
var contentString = '<h2>Capacity Development Institute</h2><p>NAS Apartments, Milimani Road,<br>P.O.Box 33411 - 00600, Nairobi, Kenya</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Capacity Development Institute'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
What exactly am I doing wrong?
Thanks
If you check console log you will see a message:
Uncaught ReferenceError: myLatlng is not defined
You have a typo:
var myLatIng = new google.maps.LatLng(-1.288902, 36.806304);
It should be
var myLatlng= new google.maps.LatLng(-1.288902, 36.806304);
So you have to change it in map_options and marker definition to be the same.