How to get to do this kind of popup with google map?
Go http://www.flightradar24.com/ and click on an airport and can see that the popup is completely personalized.
So I managed to create popup on google map but now I do not see how this is put a different message for each popup.
And how to customize the popup with css and javascript include inside?
So now I'm here and I want to know if for the moment my script is correct and how to later to reach a popup like Flightradar24 airport?
<script type='text/javascript'> $(function(){function initialize() {
var mapOptions = {
zoom: 4,
disableDefaultUI: true,
center: new google.maps.LatLng(45.35, 4.98),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
addMarkerWithWindow("This is Lemans", new google.maps.LatLng(48.006922, 0.20874), map);
addMarkerWithWindow("This is Paris", new google.maps.LatLng(48.856291, 2.352705), map);
}
function addMarkerWithWindow(name, coordinate, map) {
var popup=$('<div/>', {
content: name
});
var image = 'rss.png';
var marker = new google.maps.Marker({
map: map,
icon: image,
position: coordinate
});
var styles = [
{
featureType: "all",
stylers: [
{ saturation: -15 },
{ lightness: -10 },
]
},
];
map.setOptions({styles: styles});
// jQuery
var popup=$('<div/>', {
'id':'This is Lemans',
'text':'Hello World!'
}).dialog({
'autoOpen':false,
'width': 600,
'height':600,
'resizable':false,
'modal':false,
'title':'Le Mans'
});
google.maps.event.addListener(marker, 'click', function(e) {
console.log(e);
popup.dialog('open');
});}initialize();});//]]> </script>
If you change your addMarkerWithWindow function to use it's arguments in the popup, your code works for me:
function addMarkerWithWindow(name, coordinate, map) {
var image = 'rss.png';
var marker = new google.maps.Marker({
map: map,
// icon: image,
position: coordinate
});
// jQuery
var popup=$('<div/>', {
'id':'This is '+name,
'text':'Hello World!'
}).dialog({
'autoOpen':false,
'width': 600,
'height':600,
'resizable':false,
'modal':false,
'title':name
});
google.maps.event.addListener(marker, 'click', function(e) {
// console.log(e);
popup.dialog('open');
});
}
(console.log doesn't work in IE)
Hi You are looking for something like JSFiddle with custome popup on map click. Its just a quick mockup for you to show how you can do show hide on mouseover event. You probably can put some nice animation and stop event propagation or make it an event on click as well.
The code in you should be looking at is from line 120 to 151
events:{
mouseover: function(marker, event, context){
var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
jQuery(listelement).attr('style','background-color:#ccc');
jQuery(listelement).attr('data-isactive','1');
var map = $(this).gmap3("get"),
infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(context.data.ht);
jQuery("#customPopup").html(context.data.ht); //This puts html in popup. You can even get html from a jquery template or get it via json if you want.
jQuery("#customPopup").show(500); // This part shows the popup
} else {
$(this).gmap3({
infowindow:{
anchor:marker,
options:{content: context.data.ht}
}
});
jQuery("#customPopup").html(context.data.ht); //This is when no window is present so we create new window and again full it with html as you wish
jQuery("#customPopup").show(500); //Then show it to the user
}
},
mouseout: function(marker,event,context){
var listelement = jQuery("li[data-mapid='"+context.data.id+"']");
jQuery(listelement).attr('style','background-color:#fff');
jQuery(listelement).attr('data-isactive','0');
var infowindow = $(this).gmap3({get:{name:"infowindow"}});
if (infowindow){
infowindow.close();
jQuery("#customPopup").html(""); //Hide the html or not. if you do this then html will go away first before hiding it not so good animated effect but you get the point.
jQuery("#customPopup").hide(500); //Take it away from user
}
Related
I'm trying to make this code by Geocodezip show only one popup at the time on the side of the map, the other(s) being hidden when not active.
I've tried to add an if..else statement to the google.maps.event.addListener for this but not working so far.
What should I do in the if..else statement to make all popups hidden unless active?
google.maps.event.addListener(marker, 'click', function(e) {
if ( popup.dialog('open') ) {
popup.show();
} else {
popup.hide();
}
});
pass a unique id to the map marker, use that id to toggle the correct popup
var popup = []
addMarkerWithWindow("first","This is Lemans", new google.maps.LatLng(48.006922, 0.20874), map);
addMarkerWithWindow("second","This is Paris", new google.maps.LatLng(48.856291, 2.352705), map);
function addMarkerWithWindow(id, name, coordinate, map) {
/* var popup=$('<div/>', {
content: name
});
*/
var image = 'rss.png';
var marker = new google.maps.Marker({
map: map,
// icon: image,
position: coordinate
customId:id
});
// jQuery
popup[id]=$('<div/>', {
'id':'This is '+name,
'text':'Hello World!'
"class":'popp'
}).dialog({
'autoOpen':false,
'width': 600,
'height':600,
'resizable':false,
'modal':false,
'title':name
});
google.maps.event.addListener(marker, 'click', function(e) {
$('.popp').dialog('close');
popup[this.customId].dialog('open');
});
}
I have the following code setup to apply a map for a variety of areas
var locations = [
['Liver Office - Liverpool Office', 53.40529, -2.988801, 1],
['Lond office - London Office', 51.515026, -0.086811, 2],
];
function plotMap(loc) {
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng((locations[loc][1]), (locations[loc][2])),
stylers: [
{ saturation: -100 } // <-- THIS
]
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
},
icon: 'marketICO.png',
title: (locations[loc][0])
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infowindow.setContent(locations[loc][0]);
infowindow.open(map, marker);
}
})(marker, loc));
}
$('.livLink').click(function(){
plotMap(0);
});
$('.lonLink').click(function(){
plotMap(1);
});
plotMap(0);
Regarding reloading the map - at the moment the above script is triggered by 2 tab buttons - if a map is loaded and the second button is clicked the script re-runs and replaces the existing map - I'm just thinking of memory issues - should the initial map instance be stopped before loading a second?
You can create 2 map instances (map1and map2 for example).
Initialize both maps on document ready (or another event) and trigger a map resize when changing tabs.
google.maps.event.trigger(map, 'resize');
Replace map by the appropriate map object (corresponding to the map on the tab you show).
When you think about memory issues(and also when not) it's better to re-use the Map-instance(see: Bug: Destroying Google Map Instance Never Frees Memory)
function plotMap(loc) {
var map_container = document.getElementById('map');
if (!map_container.map) {
map_container.map = new google.maps.Map(map_container,
{
stylers: [{
saturation: -100
}
]
});
map_container.marker = new google.maps.Marker();
map_container.infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map_container.marker, 'click', function () {
map_container.infowindow.close();
map_container.infowindow.open(this.getMap(), this);
});
map_container.infowindow.bindTo('content', map_container.marker, 'content');
}
map_container.infowindow.close();
map_container.map.setOptions({
zoom: 17,
center: new google.maps.LatLng((locations[loc][1]), (locations[loc][2]))
});
//icon: 'marketICO.png',
map_container.marker.setOptions({
position: map_container.map.getCenter(),
map: map_container.map,
content: locations[loc][0],
title: locations[loc][0]
});
}
I have the following function, first I create the marker, then I create an infowindow loading the html from a template, until here everything works perfectly. And here is the problem, I am trying to change the appearance of the infowindow, I am trying for example to hide everything $(".instagram-marker-infowindow").hide() just to see if it works, but it doesn't
this.addToMap = function(InstaPic){
var marker = new google.maps.Marker({
position: { lat: InstaPic.latitude, lng: InstaPic.longtitude },
map: mymap,
title: 'Hello World!',
optimized:false
});
$.get("instagram-marker-template.html", function(data){
var infowindow = new google.maps.InfoWindow({
content: data
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(mymap,marker);
});
$(".instagram-marker-infowindow").hide();
});
}
Any idea why this is happening?
I'm using 2 tabs, first for showing list and another showing map.
When the first time page is loaded 1 tab is shown by default and on click of second tab map is shown, but when i click list tab and again click map tab map loading partially.
Here is my JAVASCRIPT code:
$(document).on('click', "#load-map-view", function() {
locateStores();
$("#store-list-view").hide();
$("#store-list-view").removeClass('disabled');
$("#store-map-view").show();
$("#store-map-view").addClass('disabled');
});
function locateStores() {
var mapContent;
var map = new google.maps.Map(document.getElementById("store-map-view"), {
center: new google.maps.LatLng(47.6145, -122.3418),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var markers = [];
$("#store-list-view .listed-shop").each(function() {
markers.push({
lat: $(this).attr('data-lat'),
lng: $(this).attr('data-lan'),
name: $.trim($(this).find('div.shop-name').text())
});
});
for (index in markers)
addMarker(markers[index]);
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.name
});
var infobox = new InfoBox({
content: document.getElementById("infobox"),
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-140, -10),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.80,
width: "400px"//"280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
google.maps.event.addListener(marker, 'click', function() {
$(".infoBox").fadeOut(300);
infobox.open(map, this);
map.panTo(new google.maps.LatLng(47.6145, -122.3418));
});
}
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
var pin = new google.maps.MVCObject();
function openInfoWindow(marker) {
title.innerHTML = marker.getTitle();
pin.set("position", marker.getPosition());
infowindow.open(map, marker);
}
}
I have tried several solutions like :
adding this code
google.maps.event.trigger(map, "resize");
and many other solutions, but still the page still isn't loading.
can someone help me out in this?
I have figured out the problem I was getting.
I was adding below code on wrong position:
google.maps.event.trigger(map, "resize");
The solution to my problem is:
If you are using map for hidden div. Declare map variable as global.
Then show the div first, load the map after div is shown and resize it using the code given.
var map; //globalize your map variable
// Then do the necessary loading
$(document).on('click', "#load-map-view", function() {
$("#store-list-view").hide();
$("#store-list-view").removeClass('disabled');
locateStores();
google.maps.event.trigger(map, "resize");
$("#store-map-view").show();
$("#store-map-view").addClass('disabled');
});
I'm having trouble with v3 of the Google Maps API and using the InfoBox plugin specifically with respect to this usability issue use case:
Since my map requires a custom infobox to be opened upon hovering the mouse over each respective marker, when the map has 2 markers on it that are close in proximity, even when/if one of the markers lies behind an infobox that is currently open after hovering the other close-by marker, it is triggered when mousing over it marker (even though it's behind the currently open infobox) and the other infobox obstructs the currently/previously opened infobox
I've followed the question and answer process by another poster here: Google Maps API v3 Event mouseover with InfoBox plugin and have followed the recommended code, but i can't wrap my mind around how to prevent markers that lie BEHIND an open infobox to not be triggered until that infobox is closed.
var gpoints = [];
function initializeMap1() {
var Map1MileLatLang = new google.maps.LatLng(39.285900,-76.570000);
var Map1MileOptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
mapTypeControl: false,
zoom: 14,
center: Map1MileLatLang,
//mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeId: 'Styled'
};
var Map1Mile = new google.maps.Map(document.getElementById("map_canvas"), Map1MileOptions);
var styledMapType = new google.maps.StyledMapType(styles, { name: 'Styled' });//new
Map1Mile.mapTypes.set('Styled', styledMapType);//new
for ( var i=0; i<5; i++ ) {
gpoints.push( new point(Map1Mile) );
gpoints.push( new point2(Map1Mile) );
}
function popup(_point) {
_point.popup = new InfoBox({
content: _point.content,
pane: 'floatPane',
closeBoxURL: '',
alignBottom: 1
});
_point.popup.open(_point.marker.map, _point.marker);
google.maps.event.addListener(_point.popup, 'domready', function() {
//Have to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened)
$(_point.popup.div_).hover(
function() {
//This is called when the mouse enters the element
},
function() {
//This is called when the mouse leaves the element
_point.popup.close();
}
);
});
}
function point(_map) {
this.marker = new google.maps.Marker({
position: new google.maps.LatLng(39.291003,-76.546234),
map: _map
});
this.content = '<div class="map-popup" style="width:100px;"><div class="map-popup-window"><div class="map-popup-content">Just try to click me!<br/>Hovering over this text will result in a <code>mouseout</code> event firing on the <code>map-popup</code> element and this will disappear.</div></div>';
// Scope
var gpoint = this;
// Events
google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
popup(gpoint);
});
}
function point2(_map) {
this.marker = new google.maps.Marker({
position: new google.maps.LatLng(39.295003,-76.545234),
map: _map
});
this.content = '<div class="map-popup" style="width:100px;"><div class="map-popup-window"><div class="map-popup-content">Just try to click me!<br/>Hovering over this text will result in a <code>mouseout</code> event firing on the <code>map-popup</code> element and this will disappear.</div></div>';
// Scope
var gpoint = this;
// Events
google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
popup(gpoint);
});
}
After doing experimenting, i suspect this issue is irrelevant to z-index... am i correct in understanding this needs to be caught in the javascript?
Any help or advice would be greatly appreciated!
Adding optimized: false attribute for your markers should solve the problem.
this.marker = new google.maps.Marker({
position: new google.maps.LatLng(39.295003,-76.545234),
map: _map,
optimized: false
});