I am trying to attach a URL to a iframe, When a event-listener is clicked not to sure if this is the right method.
var locations = [
['Station 1', -32.77255333509087, 151.64851427078247, 1, www.url.com],
['Station 2', -32.75009, 151.73467000000405, 2, www.url.com],
['Station 3', -32.79854, 151.64355, 3, www.url.com],
];
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], url: place[4]),
map: map, icon: icon_station, animation: google.maps.Animation.BOUNCE
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
$("#station_frame").attr("src", "URL Goes here?");
}
})(marker, i));
}
Replace "URL goes here?" by:
locations[i][4]
...and it should work.
Note:
This part of your code is wrong and forces a syntax-error:
new google.maps.LatLng(locations[i][1], locations[i][2], url: place[4])
it has to be:
new google.maps.LatLng(locations[i][1], locations[i][2])
Related
I have this code that uses a custom Google street view panorama and creates some custom markers.
function initialize() {
var panoOptions = {
pano: 'a9V_yZU01A7nTQW7S4Hxjw',
pov: {
heading: 0,
pitch:0
},
zoom: 0
};
var pano = new google.maps.StreetViewPanorama(document.getElementById('virtualTour'), panoOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
var locations = [
['<div style="width: 170px;">MARKERS 1</div>', 37.869197, -122.254583]
];
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: pano,
visible: false,
zIndex: 999
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(pano, marker);
}
})(marker, i));
markers.push(marker); // save all markers
}
for (i = 0; i < locations.length; i++) {
markers[i].setVisible(true);
markers[i].setMap(pano);
}
pano.setVisible(true);
}
google.maps.event.addDomListener(window, 'load', initialize);
My question is: why are markers shown only after I move through google street view arrows on floor?
I want markers to be shown on initialize function. Can anyone help me? I have created a jsfiddle for my project:
http://jsfiddle.net/7HpmE/
Thanks in advance!
Better late than never.
I was able to fix your problem by simply reloading the pano after the markers have been added.
All I did was replacing the following line:
pano.setVisible(true);
(the panorama is visible by default) with:
pano.setPano('a9V_yZU01A7nTQW7S4Hxjw');
Here is an updated version of your jsfidle:
http://jsfiddle.net/7mfswdbg/
I am using the code below to add markers to a map it also have a listener to remove the marker from the map but I cannot figure out how to also remove the
marker from the markerarray at the same time as time as removing it from the map.
can someone give me a pointer on how to achieve this.
function createRedMarker(Lat, Lang, html, atitle) {
var latlng = new google.maps.LatLng(Lat, Lang);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: atitle,
icon: redmarker,
shadow: mshadow
});
google.maps.event.addListener(marker, "rightclick", function() {
if (confirm("Deselect " + marker.title + " and remove from Map?")) {
marker.setMap(null);
window.status = "Deselected>" + marker.title + "<";
}
});
markersArray.push(marker);
}
Please take a look at this solution. Hope this will help.
function createRedMarker(Lat, Lang, html, atitle) {
var latlng = new google.maps.LatLng(Lat, Lang);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: atitle,
icon: redmarker,
shadow: mshadow
});
google.maps.event.addListener(marker, "rightclick", function() {
if (confirm("Deselect " + marker.title + " and remove from Map?")) {
marker.setMap(null);
for (var i = 0; i < markers.length; i++) {
if (markers[i].getPosition().equals(marker.getPosition())) {
var index = markers.indexOf(marker);
markers.splice(index, 1);
break;
}
}
window.status = "Deselected>" + marker.title + "<";
}
});
markersArray.push(marker);
}
I have a custom google map which i have added styling to, its an event map with dynamic markers, i have got the map working where it loads all the dynamic markers and info, on my page there are results underneath the map, i would like to be able to click on a link in the results which will open the relevant infowindow on the map. I have been using Raymond Camdens demo which is from this article, i cannot get the last part to work with the links on the page(i had to take the geocoding part of the script out as i dont need it to geocode addresses, im using coordinates.)
Here is my code:
var map;
var lastinfowindow;
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
{ hue: "#0b9cc1" },
{ saturation: -20 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "administrative.country",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
},
{ featureType: "water",
elementType: "geometry",
stylers: [ { visibility: "on" }, { lightness: -10 }] },
{ featureType: "poi",
stylers: [ { visibility: "on" } ] }
];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var latlng = new google.maps.LatLng(38, -90);
var mapOptions = {
zoom: 3,
center: latlng,
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
var image = 'sp-mark.png';
latLng = new google.maps.LatLng ('23.00593', '12.65287');
var marker1 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 1 - 38',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 38;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('57.19173', '-1.7083');
var marker2 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 2 - 30',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 2</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 30;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('56.98083', '1.30056');
var marker3 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 3 - 32',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 3</h3><p>Location: here, Ibiza</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 32;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('58.96', '1.39861');
var marker4 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 4 - 41',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 41;
marker.infowindow = infowindow;
markers[markers.length] = marker;
latLng = new google.maps.LatLng ('-43.92528', '28.42389');
var marker5 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 5 - 47',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 5</h3><p>Location: Here</p>"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
marker.gigid = 47;
marker.infowindow = infowindow;
markers[markers.length] = marker;
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
$(".order").click(function() {
var thisgig = $(this).data("gigid");
for(var i=0; i<markers.length; i++) {
if(markers[i].gigid == thisgig) {
console.log("found my match");
//get the latlong
if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
console.dir(markers[i]);
map.panTo(markers[i].getPosition());
markers[i].infowindow.open(map, markers[i]);
lastinfowindow = markers[i].infowindow;
}
}
});
}
here is the body section where the links will go:
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="orders">
<p class="order" data-gigid="38">
<b>Order 38</b><br/>
Event 1
</p>
<p class="order" data-gigid="30">
<b>Order 30</b><br/>
Event 2
</p>
<p class="order" data-gigid="32">
<b>Order 32</b><br/>
Event 3
</p>
<p class="order" data-gigid="41">
<b>Order 41</b><br/>
Event 4
</p>
<p class="order" data-gigid="47">
<b>Order 47</b><br/>
Event 5
</p>
</div>
</body>
Please can someone help me with this issue.
Thanks
Google maps will generally fail to load if you have any javascript errors in your page. You have many.
You have a syntax error here:
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>
});
Should be:
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 4</h3><p>Location: here</p>"
});
LatLng takes two floats, not two strings:
latLng = new google.maps.LatLng ('23.00593', '12.65287');
Javascript is case-sensitive. So when you say:
latLng = new google.maps.LatLng ('23.00593', '12.65287');
var marker1 = new google.maps.Marker({
...
position: LatLng
});
It doesn't recognise LatLng because your variable was called latLng
The problem here:
marker.gigid = 38;
is that you don't have a variable called marker; you have a variable called marker1:
var marker1 = new google.maps.Marker({
map: map,
position: LatLng,
title: 'Event 1 - 38',
icon:image
});
For completeness, here's how one of your markers should be done (there are better ways, but this should work):
latLng = new google.maps.LatLng (23.00593,12.65287);
var marker1 = new google.maps.Marker({
map: map,
position: latLng ,
title: 'Event 1 - 38',
icon:image
});
var infowindow = new google.maps.InfoWindow({
content: "<h3 class=maph3>Event 1</h3><p>Location: here</p>"
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map,marker1);
});
marker1.gigid = 38;
marker1.infowindow = infowindow;
markers[markers.length] = marker1;
For generate markers on google maps I call the function displayLocation with the next code:
for (var i=0; i<data.length; i++) {
displayLocation(data[i]);
}
On displayLocation I create an array with all the positions for the path I want to create and the markers, I just wanna show the first and the last marker on the path.
My displayLocation function looks like:
function displayLocation(location){
var latLng = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
if(location.nombreequipo=="AST1"){
var path = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
rutaAST1.push(path);
}
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: imagen,
draggable: false,
visible: true,
title: location.nombreequipo
});
arrayMarcadores.push(marker);
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);
infowindow.open(map, marker);
});
return marker;
}
In this part of the code I set the path, I call:
varBool = true;
dibujaRutaAST1(map, rutaAST1, varBool);
And the function is:
var ruta = null;
function dibujaRutaAST1(mapa, rutaVar, varBool){
if(!ruta){
var coordRuta = rutaVar;
console.log("En función dibujo de rutas AST1: "+rutaVar);
ruta= new google.maps.Polyline({
map: mapa,
path: coordRuta,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 3
});
console.log(ruta);
}if(varBool){
ruta.setMap(mapa);
}else{
ruta.setMap(null);
}
}
Iteration on markers array:
function mostrarMarcas(nombreEquipo){
for(var i=0;i<arrayMarcadores.length;i++){
if(arrayMarcadores[i].title==nombreEquipo){
arrayMarcadores[i].setVisible(true);
}
}
}
Any suggestion?
Thanks.
Finally I just create the first and the last marker from my array with all the points:
if(rutaAST1.length!=0){
dibujaRutaAST1(map, rutaAST1, varBool);
var imagen ='img/markers/blue_MarkerA.png';
var markerIniAST1 = new google.maps.Marker({
position: rutaAST1[0],
map: map,
icon: imagen,
draggable: false,
visible: true,
title: "AST1"
});
google.maps.event.addListener(markerIniAST1, 'click', function(){
infowindow.setContent(contentAST1[0]);
infowindow.open(map, markerIniAST1);
});
var markerFinAST1 = new google.maps.Marker({
position: rutaAST1[rutaAST1.length-1],
map: map,
icon: imagen,
draggable: false,
visible: true,
title: "AST1"
});
google.maps.event.addListener(markerFinAST1, 'click', function(){
infowindow.setContent(contentAST1[contentAST1.length-1]);
infowindow.open(map, markerFinAST1);
});
}
Thank you so much for helping me to clear my mind with this part of my code :)
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.