I want to make an application that shows your current position on a map with a marker. The code I've done seems to work but it doesn't display the marker. Can someone help me, please?
Here's my app.js:
var app = angular.module('starter', ['ionic', 'ngCordova']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.controller('MapController', function($scope, $cordovaGeolocation, $ionicLoading, $ionicPlatform) {
$ionicPlatform.ready(function() {
$ionicLoading.show({
template: '<ion-spinner icon="bubbles"></ion-spinner><br/>Acquiring location!'
});
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
$cordovaGeolocation.getCurrentPosition(posOptions).then(function(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
var myLatlng = new google.maps.LatLng(lat, long);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
$scope.map = map;
$ionicLoading.hide();
}, function(err) {
$ionicLoading.hide();
console.log(err);
});
google.maps.event.addListener($scope.map, 'idle', function() {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.map.LatLng(myLatlng)
icon:'http://i.imgur.com/fDUI8bZ.png'
});
var infoWindow = new google.maps.InfoWindow({
content: "Here I am!"
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
infowindow.open(map, marker);
});
})
});
You are using
var long = position.coords.longitude;
whereas long is a keyword in javascript. Check the link below.
https://www.w3schools.com/js/js_reserved.asp
Unless you are using ECMAScript 5/6 standard
Try to add Latitude and Longitude in following way to new google.map.LatLng(...)
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.map.LatLng(lat, long)
icon:'http://i.imgur.com/fDUI8bZ.png'
});
Hope this will help to you
Spent a very hair-tearing hour or so trying to get the good old W3C geolocation example to work in my particular application. Didn't see this:
https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
If you are NOT using https you may (will?) get a silent, non-functioning outcome, both in Chrome and Firefox! As soon as I switched to https, it was fine.
*Hi there, i am new to the whole Google map api environment so please do guide me along.
What i am trying to achieve below is to extract data from either a XML file or a JSON file and plot the locations onto Google map. I am also trying to add a info window whereby it will show different information for each location. I understand that to have a info window, i would have to create a over lay. But the question is how do i actually tag multiple info-window to their markers ?
All markers are displayed well on the map, but the problem is when I click to see info window - info window is always displayed on the same marker. What's the problem?
This is what i have came up with so far and i would greatly appreciate if anyone is able to spot the issue.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
</style>
<script
src="https://maps.googleapis.com/maps/api/js sensor=false&libraries=visualization">
</script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(-27.48939, 153.012772),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week';
document.getElementsByTagName('head')[0].appendChild(script);
}
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var earthquake = results.features[i];
var coords = earthquake.geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: "<div>Hello! World</div>",
maxWidth:100
});
google.maps.event.addListener(marker, "mouseover", function() {
infowindow.open(map, marker);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Use this instead of marker, when opening infowindow.
google.maps.event.addListener(marker, "mouseover", function() {
infowindow.open(map, this);
});
I have seen some topics about this on this forum but didn't get the answer I was looking for.
If I'm using such a code:
<script type="text/javascript">
(function() {
window.onload = function(){
var pinkParksStyles = '';
var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
{name: "Our Location"});
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(41.3850639,2.1734035),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'pink_parks']
}
};
var map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);
map.mapTypes.set('pink_parks', pinkMapType);
map.setMapTypeId('pink_parks');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.3850639,2.1734035),
map: map
});
}
})();
</script>
<script type="text/javascript">
(function() {
window.onload = function(){
var pinkParksStyles = '';
var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
{name: "Our Location"});
var mapOptions2 = {
zoom: 11,
center: new google.maps.LatLng(41.3850639,2.1734035),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'pink_parks']
}
};
var map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions2);
map2.mapTypes.set('pink_parks', pinkMapType);
map2.setMapTypeId('pink_parks');
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(41.3850639,2.1734035),
map: map2
});
}
})();
</script>
So I have two divs with ID map_canvas1 and map_canvas2. But only the second one gets shown. I have this imported in the header of the document: http://maps.google.com/maps/api/js?sensor=false
I need to make both work but with seperated javascript. Did manage it with getting all into same function, but I need it to be seperated.
Any advice?
THANKS!
make two seperate javascript functions out of it, and put both in the onload function.
Like this:
window.onload = function(){
function1(variable);
function2(variable);
}
function1(variable) {
do stuff;
}
function2(variable)
do other stuff;
}
Alternatively you could use jQuery to handle the onload, i think that can actually add multiple handlers to the body onload. See also http://api.jquery.com/ready/
javascriptmap.php?map=xxx
$(function() {
$("#divID").each( function() {
showMap(divID);
});
});
showMap(divID) {
show map on #divID
};
On the html/php file:
<script scr="javascriptmap.php?map=map1" />
<script scr="javascriptmap.php?map=map2" />
I'm trying to create my own map using google map.
I want to create a list showing all existing markers on the map. When user clicks on one button/link from the list, the corresponding marker will be centered and its infoWindow will be displayed, i.e. the same effects as the user clicks on the marker.
I have tried a number of solutions, but I could get none of them working. Can anyone please offer me a simple solution for this? Thanks in advance!
My existing code is as follows,
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(19.642588,151.171875),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
});
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick1 = function() {
var marker = this;
infoWindow.setContent('content of infowindow');
infoWindow.open(map, marker);
};
var marker1 = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(19.642588,151.171875),
});
google.maps.event.addListener(marker1, 'click', onMarkerClick1);
this won't center the map on it, but will move so the whole balloon is visible
http://econym.org.uk/gmap/example_map2.htm
as simple as i can get it. yes, please use GMarker etc.
don't forget this in the header <script src="http://maps.google.com/maps?...
you'll need html that includes
<div id="map" style="width: 550px; height: 450px"></div>
<div id="side_bar">Marker One<br /></div>
and then javascript
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(19.642588, 151.171875), 8);
var point = new GLatLng(19.642588, 151.171875);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml("this marker has been clicked");
});
function myclick(i) {
GEvent.trigger(marker, "click");
}
map.addOverlay(marker);
There's got to be a way to add a listener to ALL MARKERS, currently I'm adding a listener to each one using a loop which feels really wrong...
This feels wrong:
google.maps.event.addListener(unique_marker_id, 'click', function(){
//do something with this marker...
});
In both Marker and MarkerWithLabel case, you might just as well use the this keyword to refer the object to which the event handler is attached:
google.maps.event.addListener(marker, 'click', function () {
// do something with this marker ...
this.setTitle('I am clicked');
});
this here is referring to the particular marker object.
You need to add the listener to each marker, but you can make it easy by e.g. defining a function like
function createMarker(pos, t) {
var marker = new google.maps.Marker({
position: pos,
map: m, // google.maps.Map
title: t
});
google.maps.event.addListener(marker, 'click', function() {
alert("I am marker " + marker.title);
});
return marker;
}
and call it appropriately:
var m1 = createMarker(new google.maps.LatLng(...), "m1");
var m2 = createMarker(new google.maps.LatLng(...), "m2");
or in a loop, etc.
If you're using GoogleMaps v3.16 or later, you can add the event handler to the whole map.data layer.
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
map.data.loadGeoJson('http://yourserver.com/path/to/geojson.json');
map.data.addListener('click', function(e) {
// this - instance of the layer object, in this case - map.data
// e.feature - instance of the feature object that initiated the event
// e.latLng - the position of the event
});
see: https://developers.google.com/maps/documentation/javascript/examples/layer-data-event
I managed to do this using FusionTablesLayer. It's a bit of work setting everything up correctly, but once you're done, it's ultra-fast, even with thousands of markers.
You basically create a public table in Google Docs and query it from your webpage. The map is pre-generated on Googles' servers, which is why it performs so well.
A complete demo page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Maps Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html, body, #map_canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
var denmark = new google.maps.LatLng(56.010666, 10.936890);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: denmark,
zoom: 7,
mapTypeId: 'roadmap'
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Coordinates',
from: '1234567'
}
});
layer.setMap(map);
google.maps.event.addListener(layer, 'click', function (event) {
alert('Hello World!'); });
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Check out this article for more info, "Too Many Markers!" by Luke Mahe and Chris Broadfoot from the Google Geo APIs Team.
I managed to get an answer here:
Google Maps and Their Markers
and a demo here:
http://jsfiddle.net/salman/bhSmf/
This simplest way is this:
google.maps.event.addListener(marker, 'click', function() {
var marker = this;
alert("Tite for this marker is:" + this.title);
});
To Expand on Jiri answer purley for those searching who also wish to add a custom label etc. In the spirit of Jiri post, in shorthand version:
var m1 = createMarker({lat: -25.363, lng: 131.044}, "m1", "<div id=\"content\"><div id=\"siteNotice\"></div> <h1 id=\"firstHeading\" class=\"firstHeading\">m1</h1> <div id=\"bodyContent\">Some info</div> </div>");
function createMarker(pos, t, d) {
var marker = new google.maps.Marker({
position: pos,
map: map,
title: t
});
google.maps.event.addListener(marker,"click", function() {
alert("I am marker " + marker.title);
new google.maps.InfoWindow({ content: d }).open(map, marker);
});
return marker;
}
Remove alert, just there to show the action etc. as with Jiri's info, you can add m2, m3 etc. I thought this simply finished things off.
/* Note: I have a set of data, and it is named by the variable data.
* The variable data is an array
*/
//Here I get the length of the data
var dataLength = data.length;
//Then I iterate through all my pieces of data here
//NOTICE THAT THE KEYWORD let IS SO IMPORTANT HERE
for(let markerIterator = 0; markerIterator < dataLength; markerIterator++) {
/* This creates a new google maps marker based on my data's latitude and
* longitude
*/
var marker = new google.maps.Marker({
position: { lat: data[markerIterator].latitude, lng:
data[markerIterator].longitude },
map: map
});
google.maps.event.addListener(marker, 'click', function () {
/* This will spit out the unique markerIterator value for each marker when
* clicked. It is a unique value because I defined markerIterator with the
* keyword let!
*/
console.log(markerIterator);
// Use the keyword this to refer to each unique marker, for example:
map.setCenter(this.getPosition());
});
}
What i've Done is, when adding new marker on map and before pushing it into markers = [] array, i just add listener to it marker.addListener('click', () => { // Do Something here});
Complete Code:
// Adds a marker to the map and push to the array.
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
icon: {
url: "http://maps.google.com/mapfiles/ms/icons/blue-dot.png"
},
animation: google.maps.Animation.DROP,
map: map
});
marker.addListener("click",
() => {
console.log("Marker Click Event Fired!");
});
markers.push(marker);
}
LINK i followed!
It was really hard for me to find a specific answer to my need. But this one is working now and everywhere for me!
Regards! :)
var map;
function initialize_map(locations) {
var options = {
zoom: 8,
center: new google.maps.LatLng(59.933688,30.331879),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), options);
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][lat], locations[i][lng]),
map: map,
title: locations[i][title]
});
set_event(marker);
bounds.extend(marker.position);
}
map.fitBounds(bounds);
}
function set_event(marker) {
google.maps.event.addListener(marker, 'click', function() {
// do something with this marker ...
});
}
You can do something like this:
function setMarkers(map, locations) {
var image = ['circle_orange.png','circle_blue .png'];
for (var i = 0; i < locations.length; i++) {
var stations = locations[i];
var myLatLng = new google.maps.LatLng(stations[1], stations[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image[stations[3]],
title: stations[0],
zIndex: stations[3],
optimized: false
});
var infowindow = new google.maps.InfoWindow({
content: "No data available"
});
google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.setContent("We can include any station information, for example: Lat/Long: "+ stations[1]+" , "+stations[2]);
infowindow.open(map, this);
});
}
}