I'm trying to use this tool: http://software.stadtwerk.org/google_maps_colorizr/ to add colour to my google map, here is my example:
http://jsfiddle.net/xUUxn/851/
The colour works fine, but now I can't seem to add any markers to it, I've tried putting this example code in:
map.addMarker({
lat: -12.043333,
lng: -77.028333,
title: 'Lima',
infoWindow: {
content: '<p>HTML Content</p>'
}
});
But it doesn't seem to work, I'm not entirely sure where to put it or even if the references are correct.
In order to create a marker you need to do the following:
Demo forked from your example: http://jsfiddle.net/lucuma/xUUxn/852/
JS:
var marker = new google.maps.Marker({
position: new google.maps.LatLng( -12.043333,-77.028333),
map: map,
title: 'Hello World!'
});
To add an info window overlay:
var contentString = '<div id="content"><h1>Overlay</h1></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
The documentation says:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map,
title:"Hello World!"
});
In your Fiddle: http://jsfiddle.net/xUUxn/854/
I was able to use a loop, by this using 'this' as second parameters to to infoWindow.open()
google.maps.event.addListener(marker, 'click', function() {
infowindow = new ....;
infowindow.open(map,this);
});
Related
I set up a map with multiple markers using Google Maps Javascript API. If a marker is clicked, an infowindow opens. However, while the content is correct (different for each marker), the infowindow opens above one and the same marker, no matter which one is clicked.
To fix this, I tried to explicitly set the correct position (long/lat) in the eventlistener function. According to console log output, the values for long and lat are correct. But the infowindows still opens at the wrong, identical position.
Here is the code; placeMarker is called from within a loop through all locations:
var activeInfoWindow;
function placeMarker(map, lat, lng, markerurl, title, contentString) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
icon: markerurl,
map: map,
title: title,
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
// close other active infowindows
if (activeInfoWindow) {
activeInfoWindow.set("marker", null);
activeInfoWindow.close();
}
// added to explicitly set new position:
infowindow.setPosition(new google.maps.LatLng(lat, lng));
// check: console log shows on click: lat and long correct (different for each clicked marker)
console.log(lat+' '+lng+' '+title);
infowindow.open(map, marker);
activeInfoWindow = infowindow;
});
}
Any idea what I am missing?
Thanks!
Solved. Simply needed to add "var" before "marker":
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
icon: markerurl,
map: map,
title: title,
});
i just working with Wikitude and Google maps in AngularJS(Ionic). I need to set ng-click event for InfoWindow in my controller. My code:
google.maps.event.addListenerOnce($scope.map, 'idle', function(){
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
var infoWindow = new google.maps.InfoWindow({
content: 'CATCH!'
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open($scope.map, marker);
});
});
You cannot link dynamically created HTML directly to controller. There are two options mentioned in this link
Other option is to use jQuery. For this you can give an id to the anchor elementand find the element by ID and attach click event.
Solved.
google.maps.event.addListenerOnce($scope.map, 'idle', function() {
var marker = new google.maps.Marker({
map: $scope.map,
animation: google.maps.Animation.DROP,
position: latLng
});
google.maps.event.addListener(marker, 'click', function() {
$scope.launchAR('mana_catch_and_eat');
});
});
I have an issue to add infoWindow to my markers generated by a FOR loop.
I want to generate a infoWindow to each marker.
I see only the last infoWindow is added, even if I clic to other marker, this infoWindow is shown in the last marker see screenshot
Here is my loop to create markers and infowindows :
for (var i in data) {
var rssi = data[i].rssi;
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(data[i].lat, data[i].lng),
title: data[i].rssi,
clickable: true
});
marker.info = new google.maps.InfoWindow({
content: 'This is the marker:'+i
});
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker);
});
markers.push(marker);
}
you need to find the current marker then get the info object from it.try this:
use:
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map,this );
});
<script src="http://maps.google.com/maps/api/js?v=3.9&sensor=false"></script>
<script>
var markers=[];
function plotmap(){
var gm = google.maps;
var map = new gm.Map(document.getElementById('map_canvas'), {
mapTypeId: gm.MapTypeId.SATELLITE,
center: new gm.LatLng(17.00,78.43), zoom: 10
});
var data=[{'rssi':"fgfghfgh",'lat':"17.43",'lng':"78.43"},{'rssi':"new one",'lat':"17.49",'lng':"78.53"}];
for (var i in data) {
var rssi = data[i].rssi;
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(data[i].lat, data[i].lng),
title: data[i].rssi,
clickable: true
});
marker.info = new google.maps.InfoWindow({
content: 'This is the marker:'+i
});
google.maps.event.addListener(marker, 'click', function() {
this.info.open(map,this );
});
markers.push(marker);
}
}
</script>
<div id="map_canvas" style="width:600px;height:500px;"></div>
<script>
plotmap();
</script>
I think you should open infoWindow on given index, otherwise it's always referenced to the last loop item. So in click event you should open infoWIndow in a given i
google.maps.event.addListener(marker, 'click', function() {
marker.info.open(map, marker[i]);
});
I guess if you click in a different marker then you will have a two open infoWindow. If you want to always keep a one open you can store currentOpen index and close it before open a new one.
In fact the problem was in
marker.info.open(map, marker);
Thet should be
marker.info.open(map, this);
I've been reading https://developers.google.com/maps/documentation/javascript/overlays for a while now and I can't seem to get a custom icon for my map working.
Here is my javascript:
var simplerweb = new google.maps.LatLng(55.977046,-3.197118);
var marker;
var map;
function initialize() {
var myOpts = {
center: simplerweb,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOpts);
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: simplerweb
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
Any pointers for a complete beginner with gmaps?
demo: http://so.lucafilosofi.com/how-do-you-create-a-marker-with-a-custom-icon-for-google-maps-api-v3
marker = new google.maps.Marker({
map:map,
// draggable:true,
// animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(59.32522, 18.07002),
icon: 'http://cdn.com/my-custom-icon.png' // null = default icon
});
NOTE: https://developers.google.com/maps/documentation/javascript/overlays#Icons
Try
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: 'http://imageshack.us/a/img826/9489/x1my.png',
map: map
});
from here
https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-custom
Symbol You Want on Color You Want!
I was looking for this answer for days and here it is the right and easy way to create a custom marker:
'http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=xxx%7c5680FC%7c000000&.png' where xxx is the text and 5680fc is the hexadecimal color code of the background and 000000 is the hexadecimal color code of the text.
Theses markers are totally dynamic and you can create whatever balloon icon you want. Just change the URL.
My recommendation is to use "Overlayview" component as an alternative to Marker because you can use any html element inside "Overlayview" component. This is the trick I use to get around marker component limitations.
I'm trying to add infoWindow's to multiple markers on a Google Map. The closest I have come is to get an infoWindow to display the last address you can see in the array, on all markers. The bit of code I have pasted below does not work, I get an "Uncaught TypeError: Cannot read property '4' of undefined". I'm sure this is a scope issue, but I'm going round in circles here and could do with some help:
var hotels = [
['ibis Birmingham Airport', 52.452656, -1.730548, 4, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3AW','(+44)1217805800','(+44)1217805810','info#ibisbhamairport.com','http://www.booknowaddress.com'],
['ETAP Birmingham Airport', 52.452527, -1.731644, 3, 'Ambassador Road<br />Bickenhill<br />Solihull<br />Birmingham<br />B26 3QL','(+44)1217805858','(+44)1217805860','info#etapbhamairport.com','http://www.booknowaddress.com'],
['ibis Birmingham City Centre', 52.475162, -1.897208, 2, 'Ladywell Walk<br />Birmingham<br />B5 4ST','(+44)1216226010','(+44)1216226020','info#ibisbhamcity.com','http://www.booknowaddress.com']
];
for (var i = 0; i < hotels.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(hotels[i][1], hotels[i][2]),
map: map,
icon: image,
title: hotels[i][0],
zIndex: hotels[i][2]
});
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
var markerContent = hotels[i][4];
infoWindow.setContent(markerContent);
infoWindow.open(map, this);
});
}
Thanks in anticipation.
We've solved this, although we didn't think having the addListener outside of the for would make any difference, it seems to. Here's the answer:
Create a new function with your information for the infoWindow in it:
function addInfoWindow(marker, message) {
var infoWindow = new google.maps.InfoWindow({
content: message
});
google.maps.event.addListener(marker, 'click', function () {
infoWindow.open(map, marker);
});
}
Then call the function with the array ID and the marker you want to create:
addInfoWindow(marker, hotels[i][3]);
Although this question has already been answered, I think this approach is better :
http://jsfiddle.net/kjy112/3CvaD/ extract from this question on StackOverFlow google maps - open marker infowindow given the coordinates:
Each marker gets an "infowindow" entry :
function createMarker(lat, lon, html) {
var newmarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: html
});
newmarker['infowindow'] = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(newmarker, 'mouseover', function() {
this['infowindow'].open(map, this);
});
}