I'm using the google maps api like this:
this.init_map = function(lat, lng){
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title:"I'm Here!"
});
}
This takes lat and lng, and draws the map just fine, but when new lat & lng variables get pushed into this function over a websocket the page doesn't reload, but the map gets re drawn with the marker in the new lat & lng position.
I want to update the marker on the map without redrawing the map.
var map = null;
var markers = [];
this.init_map = function(){
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
this.addMarker = function(lat, lng, id){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title:"I'm Here!"
});
markers.push({ id: id, markerObject: marker});
}
this.updateMarkerCoordinates(lat, lng, id){
//I let you loop the markers array, compare ids and retrieve the marker
marker.setPosition(new google.maps.LatLng(lat, lng));
}
Related
I'm trying to add 5 markers to Google Maps API JSFiddle but only one is showing up. Help?
I don't know what's wrong with my code, I've tried everything. As far as I'm aware my code is correct.
Link to JSFIDDLE: https://jsfiddle.net/MarnieMaclean/u04cg62p/
// Initialize and add the map
function initMap() {
//The location of Aberdeen
var aberdeen = {lat: 57.155988, lng: -2.095139};
var city1 = 'Aberdeen\n'+'lat:57.155988, lng: -2.095139'; // The
map,
centered at Aberdeen
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: aberdeen});
// The marker, positioned at Aberdeen
var marker1 = new google.maps.Marker({position: aberdeen, map: map,
id: c1, title: city1});
//The location of Inverness
var inverness = {lat: 57.480819, lng: -4.224250};
var city2 = 'Inverness\n'+'lat: 57.480819, lng: -4.224250'; // The
map, centered at Inverness
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: inverness});
// The marker, positioned at Inverness
var marker2 = new google.maps.Marker({position: inverness, map: map,
id:c2, title: city2});
//The location of Dundee
var dundee = {lat: 56.467546, lng: -2.969593}; var city3 = dundee;
// The map, centered at Dundee
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: dundee});
// The marker, positioned at Dundee
var marker3 = new google.maps.Marker({position: dundee, map: map});
//The location of Glasgow
var glasgow = {lat: 55.875362, lng: -4.250252};
var city4 = 'Glasgow\n'+'lat: 55.875362, lng: -4.250252'; // The
map, centered at Glasgow
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: glasgow});
// The marker, positioned at Glasgow
var marker4 = new google.maps.Marker({position: glasgow, map: map,
id:c4, title: city4});
//The location of Edinburgh
var edinburgh = {lat: 55.959425, lng: -3.189161};
var city5 = 'Edinburgh\n'+'lat: 55.959425, lng: -3.189161';
var map = new google.maps.Map( document.getElementById('map'),
{zoom: 4, center: edinburgh});
// The marker, positioned at Edinburgh
var marker5 = new google.maps.Marker({position: edinburgh, map: map,
id: c5, title: city5}); }
You need only one map object (removed the others )
// Initialize and add the map
function initMap() {
var inverness = {lat: 57.480819, lng: -4.224250};
var city1 = {position: inverness};
// The map, centered at Inverness
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: inverness});
// The marker, positioned at Inverness
var marker1 = new google.maps.Marker({position: inverness, map: map});
var dundee = {lat: 56.467546, lng: -2.969593};
var city2 = {position: dundee};
// The marker, positioned at Dundee
var marker2 = new google.maps.Marker({position: dundee, map: map});
var glasgow = {lat: 55.875362, lng: -4.250252};
var city3 = {position: glasgow};
// The marker, positioned at Glasgow
var marker3 = new google.maps.Marker({position: glasgow, map: map});
var edinburgh = {lat: 55.959425, lng: -3.189161};
var city4 = {position: edinburgh};
// The marker, positioned at Edinburgh
var marker4 = new google.maps.Marker({position: edinburgh, map: map});
var aberdeen = {lat: 57.155988, lng: -2.095139};
var city5 = {position: aberdeen};
// The marker, positioned at Aberdeen
var marker5 = new google.maps.Marker({position: aberdeen, map: map});
}
https://jsfiddle.net/0uq73kzo/
The problem is: you're creating the map 5 times, setting it up every time and setting only one marker in each. Every time you're using the variable "map" and the last one wins. That get displayed. So: create the "map" at the beginning ONCE and then USE it down below.
Remove the 4 more "var map = ..." lines.
I am trying to put two separate markers on two separate maps that are positioned side by side on my website.
<script type="text/javascript">
var map, map2;
function initialize(condition) {
// create the maps
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(35.594700, -105.221787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var myOptions1 = {
zoom: 14,
center: new google.maps.LatLng(35.104441, -106.575394),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);
}
</script>
You can create a simple maker for this.
Just place this in your code after map = new Google.maps.Map(document.getElementById("map_canvas"), myOptions);:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.594700, -105.221787),
map: map,
title: 'Marker 1'
});
And after map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.104441, -106.575394),
map: map2,
title: 'Marker 2'
});
Example
Your code should look like this:
<script type="text/javascript">
var map, map2;
function initialize(condition) {
// create the maps
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(35.594700, -105.221787),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.594700, -105.221787),
map: map,
title: 'Marker 1'
});
var myOptions1 = {
zoom: 14,
center: new google.maps.LatLng(35.104441, -106.575394),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions1);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(35.104441, -106.575394),
map: map2,
title: 'Marker 2'
});
}
</script>
That code by itself will not put any markers on the map, it will simply render the maps, with each one centred on the latitude/longitude you specify.
Look at the first example on https://developers.google.com/maps/documentation/javascript/markers for an idea of how to add a marker to each of your maps.
I can successfully generate a google map with the code below:
var myLatlng = new google.maps.LatLng(37.77493, -122.419415);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
However when I try to do it with the block of code below (storing the coordinate in a variable). The map comes up as all blue, with or with out the replace function.
var coordinate = "37.77493,-122.419415";
coordinate = coordinate.replace('"','');
var myLatlng = new google.maps.LatLng(coordinate);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Can anyone tell me what's going wrong?
It looks like LatLng constructor takes two numbers not a string
var coordinates = "37.77493,-122.419415".split(',');
var myLatlng = new google.maps.LatLng(coordinates[0], coordinates[1]);
I am using this google maps script code and it has no problems but I need to add a marker to it.
There's code that defined a marker but no marker seems to appear in the map.
Here is the code:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(123456.-12345566);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Fast marker"
});
}
jQuery(document).ready(initialize);
</script>
How would I add a marker to it?
Neither coordinates (one for map, one for marker) are properly defined
This page will give you LatLng coordinates for the spot you click on the map to customize and fill in the values below.
//map center
var latlng = new google.maps.LatLng(12,-12); // <-- this one
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// HERE ALSO
var myLatlng = new google.maps.LatLng(12,-12); // <-- this one for the marker
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
The code is fine. It will add a pointer to a map.
Couple of things:
Do you have a Google API key? (https://developers.google.com/maps/documentation/javascript/tutorial#api_key)
The coordinates you gave are no where. Try using -123456. 12345566 as a test.
I'm using this code:
<script type='text/javascript'>
function initialize() {
var latlng = new google.maps.LatLng(50.077861,14.456956);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(\"searchMap\"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Here we are!'
});
}
</script>
But now I need to show multiple markers on the map, and the markers should include links to subpages of the website, any ideas how to menage that width the code I posted?
Thanks, Mike.