I ahve just started using the Goggle Maps API and I have followed all of the instructions but for some reason the Map shows but the Marker to show the specific location is not displaying.
Below is the code I'm using:
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var myLatIng = new google.maps.LatLng(-1.288902, 36.806304);
var map_options = {
center: myLatIng,
zoom: 19
}
var map = new google.maps.Map(map_canvas, map_options);
var contentString = '<h2>Capacity Development Institute</h2><p>NAS Apartments, Milimani Road,<br>P.O.Box 33411 - 00600, Nairobi, Kenya</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Capacity Development Institute'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
What exactly am I doing wrong?
Thanks
If you check console log you will see a message:
Uncaught ReferenceError: myLatlng is not defined
You have a typo:
var myLatIng = new google.maps.LatLng(-1.288902, 36.806304);
It should be
var myLatlng= new google.maps.LatLng(-1.288902, 36.806304);
So you have to change it in map_options and marker definition to be the same.
Related
I created google maps with Json and used database postgresql
this is my code
<script type="text/javascript">
var map;
var national = [{"lng":"-6.173319","city":"JAKARTA","lat":"106.818672"}];
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-0.789275,113.921327),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
$.getJSON('json_city.json', function(data) {
$.each( data.national, function(index, item) {
var myLatlng = new google.maps.LatLng(item.lat, item.lng);
alert(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "text "+item.city
});
});
});
// Initialize the map
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Lat and long used character type (Text). My maps can show, but my marker can't show.
Google Maps needs coordinates for the LatLng constructor to be Numbers, not strings. Try:
var myLatlng = new google.maps.LatLng(parseFloat(item.lat), parseFloat(item.lng));
I am implementing a Google Map on my webpage using JavaScript. Here my problem is map is coming with marker but it's background image is not showing at all. The screen shot is given below.
Here is my code:
<div id="dvMap" style="width:1000px; height:1000px;"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var markers = [{"lat":"20.295728","lng":"85.844990"},{"title":"shilparamam","lat":"20.295728","lng":"85.844990","description":"Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra."}];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
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,
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);
}
</script>
Here I need the clear background image for the Google Map.
Why don't you use a simple iframe instead of such a long script? Below link provides you with simple steps to get an iframe code which you just need to embedd in your project or website using html div.
http://www.dummies.com/web-design-development/site-development/how-to-embed-a-google-map-with-iframe/
Why is it that only the first (one only) InfoWindow showing on Google Map? I want all of the pinned address show InfoWindow.
I already searched for answers like Only the first marker showing on google map , Google Maps API InfoWindow only showing the first location for all the markers and Google maps-api v3 InfoWindow automatically open on page load but still no luck.
here is my code.
$scope.initialise = function(){
$http.get('http://remoteapi.com/' + $scope.name)
.success(function(data)
{
var myLatlng = new google.maps.LatLng(8.4844173, 124.6526134);
var mapOptions = {
center: myLatlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
for( var i in data ) {
var position = new google.maps.LatLng(data[i].lat, data[i].lon);
marker = new google.maps.Marker({
position: position,
map: map,
content: data[i].description
});
var infowindow = new google.maps.InfoWindow({
content: "<img style='max-width:50px;max-height50px;' src='images/"+data[i].image+"'>"
});
}
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);
});
};
google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
I am working on google maps api on web
This is my code
function initialize() {
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);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Just the map is shown but the marker is not, why please?
I have a second question please. What is the best action the user expect to click (or do) what they want to add a marker on the map?
Thanks
Maybe you used the ID wrong.
JS:
function initialize() {
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);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Demo : http://jsfiddle.net/lotusgodkk/x8dSP/3523/
I am having some difficulties with getting tabbed info windows to appear for paths. I have followed this tutorial.
I have a KML layer with polylines (they curve - represent topographic features)
and do not know how to get the info window to appear when you click on a path. I've seen some tutorials on calculating midpoints (but of straight lines)..
2 ways (of many) I've tried to get path points:
var streamPoly = google.maps.Polyline.prototype.getPosition = function() {
return this.getPath().getAt(0);}
var streamPoly = poly.getPath();
What's in my header:
var map;
var streamPoly;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(42.687984,-79.394159);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'paths.kml'
});
ctaLayer.setMap(map);
ctaLayer.set('preserveViewport', true);
var infoBubble = new InfoBubble({
maxWidth: 300
});
var div = document.createElement('DIV');
div.innerHTML = 'Hello';
infoBubble.addTab('Tab 1', div);
infoBubble.addTab('Tab 2', "<B>This is tab 2</B>");
google.maps.event.addListener(streamPoly, 'click', function() {
if (!infoBubble.isOpen()) {
infoBubble.open(map, streamPoly);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
You can't access polylines in a KmlLayer as google.maps.Polyline objects. To open an InfoWindow (or an InfoBubble) on a KmlLayer, you need to add a listener to the KmlLayer:
google.maps.event.addListener(ctaLayer, 'click', function(evt) {
if (!infoBubble.isOpen()) {
infoBubble.setPosition(evt.latLng);
infoBubble.open(map);
}
});
evt will be a KmlLayerMouseEvent which will contain information about the feature clicked