I'm trying to make a chloropleth map of the 50 states.
Each state has a potential info window.
The catch is when a user clicks a state, an infowindow opens. The challenge is to close it when another state is clicked. The problem is somewhere in the code below, I can't even get the first infowindow open.
The error I get is: Uncaught ReferenceError: can't access lexical declaration 'infowindow' before initialization
"use strict";
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
zoom: 6,
center: {
lat: 28,
lng: -85
}
}); // Load GeoJSON.
map.data.loadGeoJson(
//"https://storage.googleapis.com/mapsdevsite/json/google.json"
"maps/US_ALL_STATES.geojson"
); // Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(feature => {
let color = "blue";
if (feature.getProperty("isColorful")) {
color = feature.getProperty("color");
}
return (
/** #type {!google.maps.Data.StyleOptions} */
({
fillColor: color,
strokeColor: color,
strokeWeight: 2
})
);
}); // When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener("click", event => {
if (infowindow) infowindow.close();
var content = "State: " + event.feature.getProperty("NAME") + "\r"
content = content + "Click <a href='county.html?state="+event.feature.getProperty("STATEFP")+"'>here</a> to Zoom in"
const infowindow = new google.maps.infowindow({
content: content
});
event.feature.setProperty("fillColor", "pink");
infowindow.setPosition(event.latLng);
infowindow.open(map);
console.log(event.feature);
}); // When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener("mouseover", event => {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {
strokeWeight: 8,
fillColor: "green",
strokeColor: "pink"
});
});
map.data.addListener("mouseout", event => {
map.data.revertStyle();
});
}
how do update this to make it a "one infowindow at a time" scenerio? Thank you.
Create the variable in the persistent outside scope instead:
let infowindow;
map.data.addListener("click", event => {
if (infowindow) infowindow.close();
var content = "State: " + event.feature.getProperty("NAME") + "\r"
content = content + "Click <a href='county.html?state="+event.feature.getProperty("STATEFP")+"'>here</a> to Zoom in"
infowindow = new google.maps.infowindow({
content: content
});
// etc
Related
I have 2 options in my google map. -->one is polygon and another one is draw lines.Now am trying to perform undo functionality in my page.When I click undo button recently added line should be removed(that may be in either polygon option or draw line option).Is it possible?
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: ['polygon', 'polyline']
},
circleOptions: {
strokeColor: '#00DB00',
fillColor: 'green',
fillOpacity: 0.05,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event)
{
if (event.type === 'marker') console.log('Lat: ' + event.overlay.position.lat() + ', Long: ' + event.overlay.position.lng())
else displayPolyLatLng(event.overlay.getPath().b);
});
function displayPolyLatLng(pointArray)
{debugger
var result=" ";
for (var i = 0; i < pointArray.length; i++)
{
result +='<b>Lat: ' + pointArray[i].lat() + ', Long: ' + pointArray[i].lng()+ '</b><br/>';
}
$('#info').html(result);
/*var lastEl = pointArray[pointArray.length-1];
alert(lastEl)
if(lastEl.length>1){
undo_redo.push(lastEl.pop());
} */
}
}
function removeLine(){
polylines.remove(polylines.size() - 1)
}
fiddle: https://jsfiddle.net/rc5p32nt/
Basically what #geocodezip said...
Keep a reference to the shapes added:
var overlays = [];
You can then push the latest overlay object event.overlay in the overlaycomplete event:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
overlays.push(event.overlay); // store reference to added overlay
});
Finally, on click of the Undo button hide the overlay via setMap(null):
// undo last overlay action
function removeLine() {
var lastOverlay = overlays.pop();
if (lastOverlay) lastOverlay.setMap(null);
}
Note that this doesn't remove the object, just hides it from showing on the map. If you want to remove the overlay completely you should then also set it to null.
You can show them again - if you wanted to add a Redo button (in this case you wouldn't pop them as I have done). See https://developers.google.com/maps/documentation/javascript/examples/polyline-remove for an example of how to implement this.
Updated demo: https://jsfiddle.net/3fe6nfdr/
My above answer explains how to remove the most recent overlay entirely.
However to remove the most recently drawn line segment of a polyline you can store a reference to the shape object in the overlaycomplete event object:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
overlays.push(event); // store reference to added overlay
});
Then using that determine if the object added was a polyline, grab the path array with overlay.getpath(), and finally call its pop() function to remove the last line segment:
// undo the last line segment of a polyline
function removeLineSegment() {
var lastOverlay = overlays.length > 0 ? overlays[overlays.length - 1] : null;
if (lastOverlay && lastOverlay.type === "polyline") {
var path = lastOverlay.overlay.getPath();
path.pop(); // remove last line segment
}
}
Demo: https://jsfiddle.net/q9xxt4kt/
I am building a google map and I would like to have some information show when the mouse is over a marker and then more detailed information when the user clicks on the map. I have found a solution for it by adding two infowindows.
html
<div id="map-canvas"></div>
css
#map-canvas {
height: 400px;
width: 100%;
}
js
"use strict";
// variable to hold a map
var map;
// variable to hold current active InfoWindow
var activeInfoWindow ;
// ------------------------------------------------------------------------------- //
// initialize function
// ------------------------------------------------------------------------------- //
function initialize() {
// map options - lots of options available here
var mapOptions = {
zoom : 6,
draggable: true,
center : new google.maps.LatLng(43.637599, 1.319152),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map in div called map-canvas using map options defined above
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// define three Google Map LatLng objects representing geographic points
var barca = new google.maps.LatLng(41.387042, 2.181382);
var toulouse = new google.maps.LatLng(43.637599, 1.319152);
var madrid = new google.maps.LatLng(40.424803, -3.698083);
// place markers
fnPlaceMarkers(barca,"Barcelona");
fnPlaceMarkers(toulouse,"Toulouse");
fnPlaceMarkers(madrid,"Madrid");
}
// ------------------------------------------------------------------------------- //
// create markers on the map
// ------------------------------------------------------------------------------- //
function fnPlaceMarkers(myLocation,myCityName){
var marker = new google.maps.Marker({
position : myLocation
});
//var lat_lng = {lat: 17.08672, lng: 78.42444};
// Renders the marker on the specified map
marker.setMap(map);
// create an InfoWindow - for mouseover
var infoWnd = new google.maps.InfoWindow();
// create an InfoWindow - for mouseclick
var infoWnd2 = new google.maps.InfoWindow(
{
//pixelOffset: new google.maps.Size(200,0)
//position: {40.424803, -3.698083}
//content: contentString
}
);
// -----------------------
// ON MOUSEOVER
// -----------------------
// add content to your InfoWindow
infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + ' This appears when you put your mouse over a marker</div>');
// add listener on InfoWindow for mouseover event
google.maps.event.addListener(marker, 'mouseover', function() {
// Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Close info Window on mouseclick if already opened
infoWnd2.close();
// Open new InfoWindow for mouseover event
infoWnd.open(map, marker);
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd;
});
// on mouseout (moved mouse off marker) make infoWindow disappear
google.maps.event.addListener(marker, 'mouseout', function() {
infoWnd.close();
});
// --------------------------------
// ON MARKER CLICK - (Mouse click)
// --------------------------------
// add content to InfoWindow for click event
infoWnd2.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '. <br/> This appears when you click on marker</div>');
// add listener on InfoWindow for click event
google.maps.event.addListener(marker, 'click', function() {
//Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Open InfoWindow - on click
infoWnd2.open(map, marker);
// Close "mouseover" infoWindow
infoWnd.close();
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd2;
});
}
// ------------------------------------------------------------------------------- //
// initial load
// ------------------------------------------------------------------------------- //
google.maps.event.addDomListener(window, 'load', initialize);
It works well and you can see it here:
https://codepen.io/anon/pen/JJLVNB
but I would like to improve this. I saw something that I really like. How can I add an html infowindow in the top left of the google maps like they do on booking.com (img below) on clicking the marker. When you are inside a location you can click on "Show on map" and it will show this feature that I like.
How can I create this feature of showing an infowindow on hover and then on click another one always placed at the top left?
Look at CSS cards here. You can also set the position of this div to fixed. I'd suggest you use the meta attribute viewport to help it be optimizable for mobile screens.
You can use javascript ot change the visibilty of the card when user clicks on a marker to be visible and to become hidden whenever he clicks elsewhere. Also, the content to the card can be sent from the same js function.
Since you said that your requirement is to place it on top:0 and left:0, there is a method to do that.
You display the content on a div with class=scrollFix. The entire div is it's 4th parent.
add the below code inside the eventlistener of marker -> click where you generate the info box.
1. jQuery
$(".scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.top="0px";
$(".scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.left="0";
Snippet
"use strict";
// variable to hold a map
var map;
// variable to hold current active InfoWindow
var activeInfoWindow ;
// ------------------------------------------------------------------------------- //
// initialize function
// ------------------------------------------------------------------------------- //
function initialize() {
// map options - lots of options available here
var mapOptions = {
zoom : 6,
draggable: true,
center : new google.maps.LatLng(43.637599, 1.319152),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map in div called map-canvas using map options defined above
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// define three Google Map LatLng objects representing geographic points
var barca = new google.maps.LatLng(41.387042, 2.181382);
var toulouse = new google.maps.LatLng(43.637599, 1.319152);
var madrid = new google.maps.LatLng(40.424803, -3.698083);
// place markers
fnPlaceMarkers(barca,"Barcelona");
fnPlaceMarkers(toulouse,"Toulouse");
fnPlaceMarkers(madrid,"Madrid");
}
// ------------------------------------------------------------------------------- //
// create markers on the map
// ------------------------------------------------------------------------------- //
function fnPlaceMarkers(myLocation,myCityName){
var marker = new google.maps.Marker({
position : myLocation
});
//var lat_lng = {lat: 17.08672, lng: 78.42444};
// Renders the marker on the specified map
marker.setMap(map);
// create an InfoWindow - for mouseover
var infoWnd = new google.maps.InfoWindow();
// create an InfoWindow - for mouseclick
var infoWnd2 = new google.maps.InfoWindow(
{
//pixelOffset: new google.maps.Size(200,0)
//position: {40.424803, -3.698083}
//content: contentString
}
);
// -----------------------
// ON MOUSEOVER
// -----------------------
// add content to your InfoWindow
infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + ' This appears when you put your mouse over a marker</div>');
// add listener on InfoWindow for mouseover event
google.maps.event.addListener(marker, 'mouseover', function() {
// Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Close info Window on mouseclick if already opened
infoWnd2.close();
// Open new InfoWindow for mouseover event
infoWnd.open(map, marker);
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd;
});
// on mouseout (moved mouse off marker) make infoWindow disappear
google.maps.event.addListener(marker, 'mouseout', function() {
infoWnd.close();
});
// --------------------------------
// ON MARKER CLICK - (Mouse click)
// --------------------------------
// add content to InfoWindow for click event
infoWnd2.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '. <br/> This appears when you click on marker</div>');
// add listener on InfoWindow for click event
google.maps.event.addListener(marker, 'click', function() {
//Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Open InfoWindow - on click
infoWnd2.open(map, marker);
$(".scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.top="0";
$(".scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.left="0";
// Close "mouseover" infoWindow
infoWnd.close();
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd2;
});
}
// ------------------------------------------------------------------------------- //
// initial load
// ------------------------------------------------------------------------------- //
google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas, #side-bar {
height: 400px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
2. JavaScript
document.getElementsByClassName("scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.top="0";
document.getElementsByClassName("scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.left="0";
Snippet
"use strict";
// variable to hold a map
var map;
// variable to hold current active InfoWindow
var activeInfoWindow ;
// ------------------------------------------------------------------------------- //
// initialize function
// ------------------------------------------------------------------------------- //
function initialize() {
// map options - lots of options available here
var mapOptions = {
zoom : 6,
draggable: true,
center : new google.maps.LatLng(43.637599, 1.319152),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map in div called map-canvas using map options defined above
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// define three Google Map LatLng objects representing geographic points
var barca = new google.maps.LatLng(41.387042, 2.181382);
var toulouse = new google.maps.LatLng(43.637599, 1.319152);
var madrid = new google.maps.LatLng(40.424803, -3.698083);
// place markers
fnPlaceMarkers(barca,"Barcelona");
fnPlaceMarkers(toulouse,"Toulouse");
fnPlaceMarkers(madrid,"Madrid");
}
// ------------------------------------------------------------------------------- //
// create markers on the map
// ------------------------------------------------------------------------------- //
function fnPlaceMarkers(myLocation,myCityName){
var marker = new google.maps.Marker({
position : myLocation
});
//var lat_lng = {lat: 17.08672, lng: 78.42444};
// Renders the marker on the specified map
marker.setMap(map);
// create an InfoWindow - for mouseover
var infoWnd = new google.maps.InfoWindow();
// create an InfoWindow - for mouseclick
var infoWnd2 = new google.maps.InfoWindow(
{
//pixelOffset: new google.maps.Size(200,0)
//position: {40.424803, -3.698083}
//content: contentString
}
);
// -----------------------
// ON MOUSEOVER
// -----------------------
// add content to your InfoWindow
infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + ' This appears when you put your mouse over a marker</div>');
// add listener on InfoWindow for mouseover event
google.maps.event.addListener(marker, 'mouseover', function() {
// Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Close info Window on mouseclick if already opened
infoWnd2.close();
// Open new InfoWindow for mouseover event
infoWnd.open(map, marker);
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd;
});
// on mouseout (moved mouse off marker) make infoWindow disappear
google.maps.event.addListener(marker, 'mouseout', function() {
infoWnd.close();
});
// --------------------------------
// ON MARKER CLICK - (Mouse click)
// --------------------------------
// add content to InfoWindow for click event
infoWnd2.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '. <br/> This appears when you click on marker</div>');
// add listener on InfoWindow for click event
google.maps.event.addListener(marker, 'click', function() {
//Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Open InfoWindow - on click
infoWnd2.open(map, marker);
document.getElementsByClassName("scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.top="0";
document.getElementsByClassName("scrollFix")[0].parentNode.parentNode.parentNode.parentNode.style.left="0";
// Close "mouseover" infoWindow
infoWnd.close();
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd2;
});
}
// ------------------------------------------------------------------------------- //
// initial load
// ------------------------------------------------------------------------------- //
google.maps.event.addDomListener(window, 'load', initialize);
#map-canvas, #side-bar {
height: 400px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
How do I programatically in javascript define which feature is on top of another when they overlap
In This picture I clicked on the smaller geographic feature, however the information for the outer geographic feature came up. I would like to programmatically put the smaller features on top.
Here is the my code to populate the map in javascript-
map.data.loadGeoJson('<path to my geojson definition>');
map.data.setStyle(function (feature) {
let color = 'gray';
console.log(feature);
if (feature.getProperty('isColorful')) {
color = 'blue';
}
return ({
fillColor: color,
strokeColor: color,
strokeWeight: 1
});
});
map.data.addListener('click', function (event) {
let name = event.feature.getProperty('name');
let contentString = '<h4>Polygon Info</h4><br>';
contentString += '<p>';
if (name) {
contentString += '<b>Name:</b>' + name + '<br>';
}
contentString += '</p>';
let infowindow = new google.maps.InfoWindow({
content: contentString,
position: event.latLng
});
infowindow.open(map);
event.feature.setProperty('isColorful', true);
});
Note I reversed the order of the features in the geojson file itself and that did not change the behavior.
You can use the z-index property of feature.Assuming you can disinguish one feature entry from another you can adjust z-index depending on your need in setStyle() function, just work out appropriate values
return ({
fillColor: color,
strokeColor: color,
strokeWeight: 1,
zIndex: zIndex
});
Or update z-index when mouse enters
map.data.addListener('mouseover', function(e) {
map.data.overrideStyle(e.feature, {
//strokeColor: '#1e3a2a',
//strokeWeight: 2, /* can also change these like hover effect */
zIndex: 6
});
});
map.data.addListener('mouseout', function(e) {
map.data.revertStyle();
});
Alright, this has been a problem for me for 3 days, javascript closures are just not my strong suit.
I have a google map which I've applied an overlay with a series of clickable polygons. I want a specific function to run depending on the polygon clicked, which I have working. The problem is I can't figure out how to work the listener so that a function that displays an infowindow with that polygon's zip code in it. Here's the code:
for (x = 0; x < 50 && coordsObject.length > x; x++) { //Only draw 50 polygons at a time
...
//create zipcoords array
clickablePolygons.push(new google.maps.Polygon({
paths: zipCoords
, strokeColor: "#000"
, strokeOpacity: 1
, strokeWeight: 1
, fillColor: convertRatingToHex(rating)
, fillOpacity: 0.45
}));
infoWindow.push(
new google.maps.InfoWindow({
content: '<div id="gcontent">' + zip.toString() + '</div>'
})
);
//problem child
var theFunction = function(arguments, infowindow, map) {
var marker = new google.maps.Marker({
position: arguments[0].latLng
});
infowindow.open(map, marker);
};
google.maps.event.addListener(clickablePolygons[clickablePolygons.length - 1], 'click', function() {
theFunction(arguments, infoWindow[x], map); //:(
});
clickablePolygons[clickablePolygons.length - 1].setMap(map);
}
What am I doing wrong with the closure?
in your addListener call you have function() and not function(arguments). I would also create a variable pointing to the infoWindow outside the call to addlistener. The assumption is that the click event will pass in the arguments that you are expecting. It may need to be function(e,arguments).
var win = infoWindow[x];
google.maps.event.addListener(clickablePolygons[clickablePolygons.length - 1], 'click', function(arguments) {
theFunction(arguments, win, map);
});
Looks like variable scoping problem, give it a try
(function(x){
google.maps.event.addListener(clickablePolygons[clickablePolygons.length - 1], 'click', function(arg) {
theFunction(arg, infoWindow[x], map);
});
})(x);
You do not need multiple instances of an InfoWindow. Just use the methods to set the content and position when needed.
I do not understand why you are adding a marker, is that a requirement? If you just want an InfoWindow to show when the polygon is clicked you can use the MouseEvent object passed from the click event to get the current position of the click.
Here is an example: http://jsfiddle.net/bryan_weaver/akLBM/
code in the link:
var map;
var infoWindow;
var clickablePolygons = [];
function createPolygon(path, stateName) {
var poly = new google.maps.Polygon({
paths: path,
strokeColor: "#000",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: "#330000",
fillOpacity: 0.45
});
//add the polygon to the array, to use later if needed.
clickablePolygons.push(poly);
//attach a click event, the first argument of the listener is the event
//you can get the position of the mouse cursor where the map
//was clicked through this.
google.maps.event.addListener(poly, "click", function (event) {
//call the setContent method and set the content for the info window
infoWindow.setContent("This state is: " + stateName);
//set the anchor of the info window, in this case
//I am using the mouse position at
//the time of the click
infoWindow.setPosition(event.latLng);
//open the info window, passing the map in which to attach it to.
infoWindow.open(map);
});
//add the polygon to the map
poly.setMap(map);
}
function initialize() {
var myLatLng =
new google.maps.LatLng(39.983994270935625, -111.02783203125);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//polygon coords for Utah
var utah = [
new google.maps.LatLng(41.983994270935625, -111.02783203125),
new google.maps.LatLng(42.00032514831621, -114.01611328125),
new google.maps.LatLng(36.96744946416931, -114.01611328125),
new google.maps.LatLng(37.00255267215955, -109.0283203125),
new google.maps.LatLng(40.97989806962013, -109.0283203125),
new google.maps.LatLng(41.0130657870063, -111.02783203125)];
//polygon coords for Colorado
var colorado = [
new google.maps.LatLng(40.96330795307351, -109.05029296875),
new google.maps.LatLng(36.96744946416931, -109.0283203125),
new google.maps.LatLng(37.02009820136811, -101.9970703125),
new google.maps.LatLng(40.97989806962013, -102.06298828125)];
map = new google.maps.Map($('#map')[0], mapOptions);
//create a single info window for use in the application
infoWindow = new google.maps.InfoWindow();
//add the polygon and infowindow content to the map.
createPolygon(utah, "Utah");
createPolygon(colorado, "Colorado");
}
google.maps.event.addDomListener(window, 'load', initialize);
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
}