I have this part of code, that should show pins on google map of certain locations.
<script>
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
var addresses = ['Sarajevo', 'Africa', 'Asia','North America','South America'];
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map,
icon: "http://i.imgur.com/DOd1sH3.png"
});
});
}
});
<div id="map_canvas"></div>
Map shows up and everything works, but the pins of locations are not shown.
I really dont know why.
Seems like you are calling the constructor without a reference to a variable.
Try this:
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: "http://i.imgur.com/D0d1sH3.png"
});
Alternatively you can set the markers to the map by calling the setMap function
var marker = new google.maps.Marker({
position: latlng,
icon: "http://i.imgur.com/D0d1sH3.png"
});
marker.setMap(map);
Hope this helps
Related
I have an error
location_marker.addListener is not a function
map initialization
function initAutocomplete() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 31.7917 , lng: 7.0926},
zoom: 3,
mapTypeId: 'roadmap'
});
running through a list of locations and placing a marker for each
var location_marker;
for (var i = 0; i < locations.length; i++) {
location_marker = markers.push(new google.maps.Marker({
map: map,
title: locations[i].title,
position: locations[i].location
}));
}
create an info window that displays every marker's title
var infowindow = new google.maps.InfoWindow({
content: location_marker.title
});
location_marker.addListener('click', function() {
infowindow.open(map, location_marker);
});
Based on the code you provided, which does not seem complete, I assume the following.
Your var locationMarker saves the result from markers.push which returns the length of the array to which an object (google.maps.Marker) was pushed.
Because locationMarker is a Number, it has no addListener method. You might want to do something like this instead:
location_marker = new google.maps.Marker({
map: map,
title: locations[i].title,
position: locations[i].location
})
markers.push(location_marker);
I'm creating a map using the Javascript API, and I'm having some trouble getting the markers to show up.
I've followed this tutorial to create the map, which works well:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
I've then followed this tutorial to add the marker, but it's not loading:
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Here's my code now:
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(43.643296, -79.408475),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options, marker);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
This line
var map = new google.maps.Map(map_canvas, map_options, marker);
is wrong. mapconstructor has only two arguments. It should be
var map = new google.maps.Map(map_canvas, map_options);
And myLatlng is not defined. So, you can change your code to:
function initialize() {
myLatlng = new google.maps.LatLng(43.643296, -79.408475);
var map_canvas = document.getElementById('map');
var map_options = {
center: myLatlng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!" });
}
Use this url you will get your answer http://www.w3schools.com/googleAPI/google_maps_overlays.asp
I build this script that initializes a map for a specific point:
Note: (x, y) are latitude-longitude coordinates.
<script type="text/javascript">
var businessMap;
function showBusinessMap(x, y) {
var xops =
{
zoom: 15,
center: new google.maps.LatLng(x, y)
}
var chosenPoint = new google.maps.Marker({
position: new google.maps.LatLng(x, y),
});
businessMap = new google.maps.Map(document.getElementById("businessMap"), xops);
chosenPoint.setMap(businessMap);
chosenPoint.setVisible(true);
}
</script>
It works good , but no marker is shown on the map.
I also have this jQuery function that resizes the map:
$('#showMap').on('shown', function() {
google.maps.event.trigger(businessMap, "resize");
});
How can I make the marker chosenPoint to be shown?
If I missed any info, please let me know and I'll add it.
Thanks in advance!
Edit:
var businessMap;
function showBusinessMap(x, y) {
var xops =
{
zoom: 15,
center: new google.maps.LatLng(x, y)
}
businessMap = new google.maps.Map(document.getElementById("businessMap"), xops);
var chosenPoint = new google.maps.Marker({
position: new google.maps.LatLng(x, y),
map: businessMap
});
}
Still doesn't work.
var address = "Address, City, ProvinceOrState, Country";
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//console.log("GeocoderStatus.OK : " + results[0].geometry.location);
var mapOptions = {
zoom: 8,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//load the map
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} //if
else { console.log("Geocode was not successful for the following reason: " + status); }
})
The following section is the part that adds the "Marker"
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
Edit:
You need to add your created chosenPoint to the map.
From the Google Maps API,
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
So, in your case, create the map object first, then the marker object second, and include map: businessMap in the options for the marker, much like the example above.
Look here for more information.
As a starting point, here's a simple example base on your code that works. I imagine your problem is caused by something outside of what you're showing us.
<script type="text/javascript">
var businessMap;
function showBusinessMap(x, y) {
var xops = {
zoom: 15,
center: new google.maps.LatLng(x, y)
};
var businessMap = new google.maps.Map(document.getElementById("businessMap"),
xops);
var chosenPoint = new google.maps.Marker({
position: new google.maps.LatLng(x, y),
map: businessMap
});
}
function initialize() {
showBusinessMap(-34.397, 150.644);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
In my project, I have a database containing a list of latitudes and longitudes, corresponding to several addresses, and I want to take them from this database and pass them to a javascript code that will show all these addresses in a map using markers. So far I got all the list from the database. and I was able to visualize one and only one address in the map by using it's latitude and longitude. So what I am struggeling with now is doing so for multiple addresses. Here is the code that I came up with so far:
function initialize() {
var myLatlng = new google.maps.LatLng(locations[0], locations[1]);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Fast marker"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
locations is the list of my latitudes and longitudes, and it goes like this:
locations[0]: latitude 1
locations[1]: longitude 1
locations[2]: latitude 2
locations[3]: longitude 2 etc..
Now I know there is supposed to be some kind of loop but I couldn't manage to do it.
Thanks in advance!
P.S: This is my first question so don't judge my accept rate! :)
You just need to write a for loop as follows:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(locations[0], locations[1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i = 0, ln = locations.length; i < ln; i += 2) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i], locations[i + 1]);
map: map,
title: "Fast marker"
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You can write a simple for loop to iterate through locations. Increment two at a time:
var map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i=0 ; i < locations.length-1 ; i+=2) {
var lat = locations[i];
var lng = locations[i+1];
var myLatlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Fast marker"
});
}
I got the solution. if anybody needs it in the future here is the code:
function initialize() {
console.log('hi');
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(locations[0], locations[1]),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
for (var i = 0, ln = locations.length; i < ln; i += 2) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i], locations[i + 1]),
map: map,
title: "Fast marker"
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
If you have an array of locations like following
var locations = [
[33.890542, 150.274856],
[36.923036, 152.259052],
[38.028249, 154.157507]
];
then you can use following code
function initialize() {
var myLatlng = new google.maps.LatLng(locations[0][0], locations[0][1]);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
for(var i=0;i<locations.length;i++)
{
var latlng=new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "marker : "+(i+1)
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
Working Example.
You may need/like other Google map related answers here.
How to plot more number of markers in google map
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
var latt=[13.0423734,12.918907];
var lang=[80.2727993,80.145264];
for(i=0; i<latt.length;i++)
{
initialize(latt[i],lang[i]);
}
});
function initialize(lat,lng)
{
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 5,
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: latlng,
map: map,
title:"Hello World!"
});
}
</script>
Use arrays.
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
var latt=[13.0423734,12.918907];
var lang=[80.2727993,80.145264];
initialize(latt, lang);
});
function initialize(lat_arr,lng_arr)
{
// Assuming first array element is where you want the map centered
var latlng = new google.maps.LatLng(lat_arr[0],lng_arr[0]);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var markers = [];
// start i at 0 if you want a marker at the center as well
for(var i = 1; i < lat_arr.length; i++) {
latlng = new google.maps.LatLng(lat_arr[i], lng_arr[i]);
markers[i] = new google.maps.Marker({
position: latlng,
map: map,
title:"Hello World!"
});
}
}