I would like to set maximum zoom level to block the possibility of zooming after some point in my map.
var mapa; // obiekt globalny
function dodajMarker(opcjeMarkera)
{
opcjeMarkera.map = mapa;
var marker = new google.maps.Marker(opcjeMarkera);
}
function mapaStart()
{
var wspolrzedne = new google.maps.LatLng(65.080267,13.272461);
var opcjeMapy = {
zoom: 5,
center: wspolrzedne,
mapTypeId: google.maps.MapTypeId.TERRAIN,
disableDefaultUI: true,
navigationControl: true, // kontrolka nawigacji
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.SMALL
}
};
mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy);
// wspólne cechy ikon
var rozmiar = new google.maps.Size(32,32);
var rozmiar_cien = new google.maps.Size(59,32);
var punkt_startowy = new google.maps.Point(0,0);
var punkt_zaczepienia = new google.maps.Point(16,16);
// ikonki
var ikona1 = new google.maps.MarkerImage("markers/marker1.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona2 = new google.maps.MarkerImage("markers/marker2.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona3 = new google.maps.MarkerImage("markers/marker3.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona4 = new google.maps.MarkerImage("markers/marker4.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona5 = new google.maps.MarkerImage("markers/marker5.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona6 = new google.maps.MarkerImage("markers/marker6.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona7 = new google.maps.MarkerImage("markers/marker7.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona8 = new google.maps.MarkerImage("markers/marker8.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona9 = new google.maps.MarkerImage("markers/marker9.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona10 = new google.maps.MarkerImage("markers/marker10.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona11 = new google.maps.MarkerImage("markers/marker11.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona12 = new google.maps.MarkerImage("markers/marker12.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona13 = new google.maps.MarkerImage("markers/marker13.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona14 = new google.maps.MarkerImage("markers/marker14.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona15 = new google.maps.MarkerImage("markers/marker15.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona16 = new google.maps.MarkerImage("markers/marker16.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona17 = new google.maps.MarkerImage("markers/marker17.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var ikona18 = new google.maps.MarkerImage("markers/marker18.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var cien1 = new google.maps.MarkerImage("http://www.google.com/intl/en_ALL/mapfiles/shadow50.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);
function dodajMarker(opcjeMarkera)
{
opcjeMarkera.map = mapa;
var marker = new google.maps.Marker(opcjeMarkera);
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
}
dodajMarker({position: new google.maps.LatLng(66.769332,13.33992), icon: ikona1, shadow: cien1, url:'kraje/norwegia/01/lowiskoNorwegiaArnoy.php', title: 'Wyspa Arnoy'});
dodajMarker({position: new google.maps.LatLng(69.570212,18.114624), icon: ikona2, shadow: cien1, url:'kraje/norwegia/02/lowiskoNorwegiaBuvik.php', title: 'Rejon Buvik'});
dodajMarker({position: new google.maps.LatLng(66.388821,13.127746), icon: ikona3, shadow: cien1, url:'kraje/norwegia/03/lowiskoNorwegiaPolarsikelen.php', title: 'Rejon Koła Polarnego'});
dodajMarker({position: new google.maps.LatLng(61.850513,5.049362), icon: ikona4, shadow: cien1, url:'kraje/norwegia/04/lowiskoNorwegiaBakkevik.php', title: 'Rejon Bakkevik'});
dodajMarker({position: new google.maps.LatLng(70.101699,20.444641), icon: ikona5, shadow: cien1, url:'kraje/norwegia/05/lowiskoNorwegiaLyngenfjord.php', title: 'Rejon Lyngenfjord'});
dodajMarker({position: new google.maps.LatLng(65.663482,11.924744), icon: ikona6, shadow: cien1, url:'kraje/norwegia/06/lowiskoNorwegiaVega.php', title: 'Wyspa Vega'});
//dodajMarker({position: new google.maps.LatLng(58.203148,16.601637), icon: ikona7, shadow: cien1, url:'kraje/norwegia/07/lowiskoNorwegiaVansjon.php', title: 'Jezioro Vansjøn'});
//dodajMarker({position: new google.maps.LatLng(58.203148,16.601637), icon: ikona8, shadow: cien1, url:'kraje/norwegia/08/lowiskoNorwegiaVannoya.php', title: 'Wyspa Vannøya'});
dodajMarker({position: new google.maps.LatLng(69.679548,20.262508), icon: ikona9, shadow: cien1, url:'kraje/norwegia/09/lowiskoNorwegiaKoppangen.php', title: 'Koppangen'});
dodajMarker({position: new google.maps.LatLng(70.276422,21.532745), icon: ikona10, shadow: cien1, url:'kraje/norwegia/10/lowiskoNorwegiaLoppa.php', title: 'Półwysep Loppa'});
dodajMarker({position: new google.maps.LatLng(70.483098,23.17749), icon: ikona11, shadow: cien1, url:'kraje/norwegia/11/lowiskoNorwegiaSeiland.php', title: 'Wyspa Seiland'});
dodajMarker({position: new google.maps.LatLng(69.679548,20.262508), icon: ikona12, shadow: cien1, url:'kraje/norwegia/12/lowiskoNorwegiaStoralee.php', title: 'Jezioro Stora Lee'});
dodajMarker({position: new google.maps.LatLng(60.244105,9.621048), icon: ikona13, shadow: cien1, url:'kraje/norwegia/13/lowiskoNorwegiaKroderen.php', title: 'Jezioro Krøderen'});
//dodajMarker({position: new google.maps.LatLng(58.203148,16.601637), icon: ikona14, shadow: cien1, url:'kraje/norwegia/14/lowiskoNorwegiaSperillen.php', title: 'Jezioro Sperillen'});
dodajMarker({position: new google.maps.LatLng(61.850513,5.049362), icon: ikona15, shadow: cien1, url:'kraje/norwegia/15/lowiskoNorwegiaAldersund.php', title: 'Wyspa Aldersund'});
dodajMarker({position: new google.maps.LatLng(69.320842,17.54425), icon: ikona16, shadow: cien1, url:'kraje/norwegia/16/lowiskoNorwegiaSenja.php', title: 'Wyspa Senja'});
dodajMarker({position: new google.maps.LatLng(67.740893,14.799929), icon: ikona17, shadow: cien1, url:'kraje/norwegia/17/lowiskoNorwegiaHelnessund.php', title: 'Rejon Helnessund'});
dodajMarker({position: new google.maps.LatLng(58.941565,11.659999), icon: ikona18, shadow: cien1, url:'kraje/norwegia/18/lowiskoNorwegiaKornsjo.php', title: 'Jezioro Kornsjø'});
}
The map has a property maxZoom. Simply set this to your value when you create your map.
Maybe you should also check Google Maps API for details. Here is what Kasper mentioned.
So you will get quicker answers to your questions.
Powodzenia :).
Related
This is my fiddle
http://jsfiddle.net/6wp7enot/12/
var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [
[43.65654, -79.90138, 'ABC'],
[43.65654, -79.90138, 'DEF'],
[43.65654, -79.90138, 'GHA']
]; //create global array to store points
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(43.907787, -79.359741),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var mcOptions = {
gridSize: 50,
maxZoom: 15
};
var mc = new MarkerClusterer(map, [], mcOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
for (var i = 0; i < myPoints.length; i++) {
createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
}
mc.addMarkers(markerArray, true);
}
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50)
});
function createMarker(latlng, html) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat() * -100000) << 5
});
markerArray.push(marker); //push local var marker into global array
}
window.onload = initialize;
Could you please let me know how to handle this
You created all the three markers at same position means same latitude and longitude. So three markers created at one place only. Please change latitude and longitude of other two elements from the array.
eg.
var myPoints = [
[43.65654, -79.90138, 'ABC'],
[44.65654, -79.90138, 'DEF'],
[45.65654, -79.90138, 'GHA']
]; //create global array to store points
I have a successful working GM prototype using InfoBubble here.
I need the map to recenter when I open each new InfoBubble window.
The map recenters on closing each InfoBubble because I call [line 238 etc]:
google.maps.event.addListener(infoBubble, "closeclick", function ()
Secondly, why doesn't the Los Angeles (United States West Coast, LA) InfoBubble also close the most recent InfoBubble window open as all the others do, please?
Thanks so much in advance for any suggestions; I know it must be simple - but have spent hours and hours and searched S/O too!
javascript:
$(document).ready(function () { initialize(); });
var myLatlng = new google.maps.LatLng(51.30, 0.7);
function initialize() {
google.maps.Map.prototype.setCenterWithOffset = function(LatLng, offsetX, offsetY) {
var map = this;
var ov = new google.maps.OverlayView();
ov.onAdd = function() {
var proj = this.getProjection();
var aPoint = proj.fromLatLngToContainerPixel(LatLng);
aPoint.x = aPoint.x+offsetX;
aPoint.y = aPoint.y+offsetY;
map.setCenter(proj.fromContainerPixelToLatLng(aPoint));
};
ov.draw = function() {};
ov.setMap(this);
};
var centerMap = new google.maps.LatLng(51.30, 0.7);
var mapOptions = {
zoom: 2,
disableDefaultUI: true,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
center: centerMap,
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setCenterWithOffset(myLatlng, 50, 225);
setMarkers(map, sites);
google.maps.event.addListener(infoBubble, "closeclick", function () {
map.setCenterWithOffset(myLatlng, 50, 225);
});
google.maps.event.addListener(infoBubbleLA, "closeclick", function () {
map.setCenterWithOffset(myLatlng, 50, 225);
});
};
var infoBubble = new InfoBubble({
maxWidth: 400,
});
var infoBubbleLA = new InfoBubble({
maxWidth: 400,
});
// locationstrings start
var losangeles1 = 'losangeles1';
var losangeles2 = 'losangeles2';
var losangeles3 = 'losangeles3';
var losangeles4 = 'losangeles4';
var losangelescontentString ='losangelescontentString';
var portonovocontentstring ='Porto Novo';
var shackletoncontentstring = 'Shackleton';
var florencecontentstring = 'Florence';
var buenosairescontentstring = 'Buenos Aires';
var jodhpurcontentstring = 'Jodhpur';
var mtsinaicontentstring = 'Mt Sainai';
var neworleanscontentstring = 'New Orleans';
var pariscontentstring='Paris';
// locationstrings end
infoBubbleLA.addTab('Electronic Cataloguing Initiative', losangeles1);
infoBubbleLA.addTab('Getty Leadership Institute at Claremont Graduate University', losangeles2);
infoBubbleLA.addTab('Tab 3', losangeles3);
infoBubbleLA.addTab('Preserve L.A.', losangeles4);
var sites = [
// 'Title', lat, long, contentstring
['Los Angeles', 34.054082,-118.24261, losangelescontentString],
['Porto Novo', 6.501411,2.604275, portonovocontentstring],
['Shackleton', -77.550000, 166.150000, shackletoncontentstring],
['Florence', 43.773046,11.255901, florencecontentstring],
['Buenos Aires', -34.578528,-58.526273, buenosairescontentstring],
['Jodhpur', 27.199507,73.73826, jodhpurcontentstring],
['Mt Sinai', 28.555972,33.975048, mtsinaicontentstring],
['New Orleans', 29.984676,-90.063171, neworleanscontentstring],
['Paris', 48.821799,2.404933, pariscontentstring]
];
var iconBase = 'http://gettylabs.org/visit/FoundationMap/images/';
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
icon: iconBase + 'bullet.png',
title: sites[0],
position: siteLatLng,
html: sites[3],
map: map
});
google.maps.event.addListener(marker, "click", function () {
map.setCenterWithOffset(myLatlng, 50, 25);
if (this.html == losangelescontentString) {
infoBubbleLA.setContent(this.html);
infoBubbleLA.open(map,this);
} else {
infoBubble.setContent(this.html);
infoBubble.open(map,this);
}
});
};
};
You have 2 different InfoBubbles in you code infoBubbleLA and infoBubble. Opening one won't close the the other.
var infoBubble = new InfoBubble({
maxWidth: 400,
});
var infoBubbleLA = new InfoBubble({
maxWidth: 400,
});
This should do that:
google.maps.event.addListener(marker, "click", function () {
map.setCenterWithOffset(myLatlng, 50, 25);
if (this.html == losangelescontentString) {
infoBubbleLA.setContent(this.html);
infoBubbleLA.open(map,this);
infoBubble.close();
} else {
infoBubble.setContent(this.html);
infoBubble.open(map,this);
infoBubbleLA.close();
}
});
working fiddle
I am building this JS programmatically. Each marker is being represented by separate variables like marker_0,marker_1, etc... This works but is there a way to generate the markers & info windows in a more efficient/elegant way?
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(41.056466,-85.3312009),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
//**************************************************************
//Add 1st marker
//**************************************************************
var contentString_0 ='<strong>Club name: Fort Wayne Time Corners</strong>';
var infowindow_0 = new google.maps.InfoWindow({
content: contentString_0
});
var image_0 = '/js/markers/marker1.png';
var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709);
var marker_0 = new google.maps.Marker({
position: Latlng_0,
title:"0",
icon: image_0});
marker_0.setMap(map);
google.maps.event.addListener(marker_0, 'click', function() {
infowindow_0.open(map,marker_0);
});
//**************************************************************
//Add 2nd marker
//**************************************************************
var contentString_1='<strong>Club name: Roanoke</strong>';
var infowindow_1 = new google.maps.InfoWindow({
content: contentString_1
});
var image_1 = '/js/markers/marker2.png';
var Latlng_1 = new google.maps.LatLng(41.17805990,-85.4436640);
var marker_1 = new google.maps.Marker({
position: Latlng_1,
title:"1",
icon: image_1});
marker_1.setMap(map);
google.maps.event.addListener(marker_1, 'click', function() {
infowindow_1.open(map,marker_1);
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
Yes, you can do this easily:
Create an array of data that describes each marker.
Write a function that adds a single marker based on the description in one entry of that array.
Call that function for each entry in that array.
So the only part you have to generate dynamically is that array of data; all of the actual marker code is shared for all markers.
Like this:
var map;
var places = [
{
lat: 41.057814980291,
lng: -85.329851919709,
image: 'marker1',
title: '0',
club: 'Fort Wayne Time Corners'
},
{
lat: 41.17805990,
lng: -85.4436640,
image: 'marker2',
title: '1',
club: 'Roanoke'
}
];
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(41.056466,-85.3312009),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map-canvas"),
mapOptions
);
for( var i = 0; i < places.length; i++ ) {
addPlace( places[i] );
}
function addPlace( place ) {
var content = '<strong>Club name: ' + place.club + '</strong>';
var infowindow = new google.maps.InfoWindow({
content: content
});
var image = '/js/markers/' + place.image + '.png';
var latlng = new google.maps.LatLng( place.lat, place.lng );
var marker = new google.maps.Marker({
position: latlng,
title: place.title,
icon: image
});
marker.setMap( map );
google.maps.event.addListener( marker, 'click', function() {
infowindow.open( map, marker );
});
}
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
please excuse a noob at this. When a user clicks on a map, it should place a marker and open an info window - as per this example: http://www.geocodezip.com/v3_example_click2add_infowindow.html
The code below almost works correctly, except that the mark is not replaced - a new one is added. Any ideas really, really gratefully received. Thank you.
<script>
var map = null;
var markersArray = [];
function initialize() {
var latlng = new google.maps.LatLng(0.0000, 0.0000);
var settings = {
zoom: 2,
mapTypeControl:true,
center: latlng,
panControl:true,
zoomControl:true,
streetViewControl:false,
overviewMapControl:false,
rotateControl:true,
scaleControl: true,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'white'
};
map = new google.maps.Map(document.getElementById('map'), settings);
function placeMarker(location) {
var marker , i ;
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
icon:'http://www.desperatesailors.com/templates/Live/media/mapicons/info.png',
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng() +
'<br>Only the first four decimal places needed'
});
infowindow.open(map,marker);
}
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
window.onload = initialize;
</script>
This is a scope issue. You are always delcaring marker in the placeMarker function so if( marker ) will always be false. Move the variable declaration out of that function:
<script>
var marker;
var map = null;
var markersArray = [];
function initialize() {
var latlng = new google.maps.LatLng(0.0000, 0.0000);
var settings = {
zoom: 2,
mapTypeControl:true,
center: latlng,
panControl:true,
zoomControl:true,
streetViewControl:false,
overviewMapControl:false,
rotateControl:true,
scaleControl: true,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
backgroundColor: 'white'
};
map = new google.maps.Map(document.getElementById('map'), settings);
function placeMarker(location) {
var i ;
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
icon:'http://www.desperatesailors.com/templates/Live/media/mapicons/info.png',
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng() +
'<br>Only the first four decimal places needed'
});
infowindow.open(map,marker);
}
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
window.onload = initialize;
</script>
Your placeMarker function creates a new (empty) marker variable in the local scope.
function placeMarker(location) {
var marker , i ;
if ( marker ) {
It will always create a new marker. Change it to:
var marker = null;
function placeMarker(location) {
if ( 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;