I am using the Google Maps API code to initialize 3 google maps on one page.
Here is the jsfiddle: https://jsfiddle.net/adamjesmith/e53yjye8/
The below code works fine but I was wondering if there is anyway I can simplify the JavaScript so I am not doing the same thing 3 times? Possibly using a for loop to through the number of maps?
function initialize() {
///// Stamford Bridge /////
var optionsSB = {
zoom: 15,
center: {lat: 51.481663, lng: -0.19095649999997022},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
mapSB = new google.maps.Map(document.getElementById("stamford-bridge"), optionsSB);
var markerSB = new google.maps.Marker({
position: {lat: 51.481663, lng: -0.19095649999997022},
map: mapSB,
icon: '/images/map-pin.png'
});
var infowindowSB = new google.maps.InfoWindow({
content:"<h3>Stamford Bridge</h3>"
});
infowindowSB.open(mapSB, markerSB);
///// O2 /////
var optionsO2 = {
zoom: 15,
center: {lat: 51.5030431, lng: 0.00423769999997603},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
mapO2 = new google.maps.Map(document.getElementById("o2"), optionsO2);
var markerO2 = new google.maps.Marker({
position: {lat: 51.5030431, lng: 0.00423769999997603},
map: mapO2,
icon: '/images/map-pin.png'
});
var infowindowBow = new google.maps.InfoWindow({
content:"<h3>O2</h3>"
});
infowindowBow.open(mapO2, markerO2);
///// London Zoo /////
var optionsZoo = {
zoom: 15,
center: {lat: 51.5352875, lng: -0.15343029999996816},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
mapZoo = new google.maps.Map(document.getElementById("zoo"), optionsZoo);
var markerZoo = new google.maps.Marker({
position: {lat: 51.5352875, lng: -0.15343029999996816},
map: mapZoo,
icon: '/images/map-pin.png'
});
var infowindowZoo = new google.maps.InfoWindow({
content:"<h3>London Zoo</h3>"
});
infowindowZoo.open(mapZoo, markerZoo);
}
Just wrap your map-marker-infowindow creation in a factory-like function:
function createMapWithStuff(options) {
var map = new google.maps.Map(document.getElementById(options.id), options);
var marker = new google.maps.Marker({
position: options.center,
map: map,
icon: '/images/map-pin.png'
});
var infowindow = new google.maps.InfoWindow({
content:"<h3>"+options.content+"</h3>"
});
infowindow.open(map, marker);
}
function initialize() {
///// Stamford Bridge /////
var theoptions=[ {
zoom: 15,
center: {lat: 51.481663, lng: -0.19095649999997022},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
content:'Stamford Bridge',
id:'stamford-bridge'
},{
zoom: 15,
center: {lat: 51.5030431, lng: 0.00423769999997603},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
content:'O2',
id:'o2'
},{
zoom: 15,
center: {lat: 51.5352875, lng: -0.15343029999996816},
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
content:'London Zoo',
id:'zoo'
}];
theoptions.forEach(function(optionObject) {
createMapWithStuff(optionObject);
});
}
See the fiddle
Related
I am trying to add multiple marker in gmap3. but it can't work.
If anybody any idea how to add multiple location in gmap3 API.
var contactmap = {
lat: 24.091328,
lng: 38.037067
};
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker({
position: contactmap,
icon: 'assets/img/map-marker.gif'
})
This code is view only one marker. So how can I add multiple marker in Map?.
So finally I found the Right solution with myself so thanks to support me.
var locations = [
['Yanbu Saudi Arabia', 24.091328, 38.037067, 1],
['Yanbu Saudi Arabia', 24.005421, 38.197395, 2]
];
var map = new google.maps.Map(document.getElementById('tm-map'), {
zoom: 10,
center: new google.maps.LatLng(24.005421, 38.197395),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
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
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
console.log(markers[0]);
create an array of markers and then push each new marker object into that array and finally pass array into your marker()
follow this github response https://github.com/jbdemonte/gmap3/issues/123
for any future problems refer to their github page.
// this is how you create array
var multiadress = [{latLng:[1,2],content:"abcd"},{latLng:[3,4],content:"pqr"},{latLng:[6,7],content:"kbc"}]
var markers = [];
$.each(multiadress, function(key, val){
var latLng = val.latLng
markers.push({
position: latLng,
content: val.content
});
});
var contactmap = {
lat: 24.091328,
lng: 38.037067
};
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker(markers)
accept answer if it helps you.
You can pass a markerList:
var markers = [
{ lat: 37.772, lng: -122.214 },
{ lat: 21.291, lng: -157.821 },
{ lat: -18.142, lng: 178.431 },
{ lat: -27.467, lng: 153.027 }
];
function markerSetup(markers){
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var icon = {
url: "../Content/Images/Car.png", // url
scaledSize: new google.maps.Size(50, 60), // scaled size
origin: new google.maps.Point(0, 0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
// alert(markers[0].lat)
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
// map.setMap(trafficLayer);
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
icon: icon,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
map.setZoom(12)
});
}
It's workable code. Hope it's help you.
I do it like this:
$('#tm-map')
.gmap3({
zoom: 13,
center: contactmap,
scrollwheel: false,
mapTypeId: "shadeOfGrey",
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, "shadeOfGrey"]
}
})
.marker(
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'},
{position: [51.552970, 8.560290], icon: 'assets/img/map-marker.gif'}
)
this is my code
function initMap(latitude, longitude) {
var myLatLng = {lat: latitude, lng: longitude};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
and here is how it's displayed
I would like to hide drop pin and Map/Satellite, how would I do that?
Form here https://developers.google.com/maps/documentation/javascript/controls#DisablingDefaults
Either can use
disableDefaultUI: true
globally to remove all from UI or use
{
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
rotateControl: boolean,
fullscreenControl: boolean
}
to remove/add individually
I have the following initialization for a google map:
function initialize()
{
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
};
var map = new google.maps.Map(document.getElementById("googleMap"),
mapOptions);
}
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(window, "load", initialize);
};
When trying to add the marker, I get the error:
Uncaught ReferenceError: map is not defined
How can I see this map or add a marker properly to the map?
seems you don't have a proper myLatLng position for your marker try adding one eg: myLatLng = new google.maps.LatLng(45.00, 10.00);
function initialize()
{
var mapOptions = {
zoom: 15,
center: myLatLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
scaleControl: true,
scrollwheel: true,
disableDoubleClickZoom: true,
};
var map = new google.maps.Map(document.getElementById("googleMap"),
mapOptions);
}
var myLatLng = new google.maps.LatLng(45.00, 10.00);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(window, "load", initialize);
};
<script type="text/javascript">
function initMap() {
// Map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.000000,-40.000000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
disableDefaultUI: true,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Markers
var madrid = new google.maps.Marker({
position: google.maps.LatLng(40.412154, -3.704301),
map: map,
title: 'Madrid'
});
madrid.setMap(map);
}
</script>
I am trying to put some markers on the map of certain cities. I can not seem to make the makers apear. I have looked through several forums, and tried everything.
I hope this is enough information. I am still very new to stack overflow, so If I did this wrong, please let me know how to post a question more clearly.
Thank you,
You are missing the new keyword for position parameter while creating marker, please check the below code, it should work.
function initMap() {
// Map
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.000000, -40.000000),
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false,
scrollwheel: false,
disableDefaultUI: true,
disableDoubleClickZoom: true
}
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
// Markers
var madrid = new google.maps.Marker({
position: new google.maps.LatLng(40.412154, -3.704301),
map: map,
title: 'Madrid'
});
madrid.setMap(map);
}
Code that by some unexpected reason changes scale:
map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
Map is set with code:
try {
var lat = (app.problem.latitude) ? app.problem.latitude : -27.479624,
lon = (app.problem.longitude) ? app.problem.longitude : 153.033654,
coords = new google.maps.LatLng(lat, lon);
// map options
var options = {
center: coords,
disableDefaultUI: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER
},
// mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 18
};
this.map = new google.maps.Map(this.el, options);
this.marker = new google.maps.Marker({
position: coords,
draggable: false,
animation: google.maps.Animation.DROP,
});
this.marker.setMap(this.map);
// this.map.setCenter(coords);
} catch(e){
console.error('location problem:', e.message);
}