Develop Reference

Google Map make a polyline connecting the markersMarker and Marker

I am a student trying to become a java developer in Korea
I want to draw a polyline connecting the markers with a click event, not with directions.
I'll give you an exampleenter image description here
It's not finished yet, but I'll show you what I made
I made a mistake but please understand
What I want is to draw a polyline by connecting two fixed markers.
var map, polyline,markers = new Array();
var stockholm = {lat:45,lng:10}; // 맵 중앙 설정
function initMap(){
// map options
var options = {
zoom:4,
center:stockholm,
streetViewControl: true,
draggable:true,
mapTypeId: "roadmap",
// 맵 기본 컨트롤 설정
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: true
}
// Map 호출 ======================================================================
map = new google.maps.Map(document.getElementById('map'),options);
// polyline 옵션 지정 ============================================================
polyline = new google.maps.Polyline({
strokeColor: 'red',
strokeWeight: 3,
map: map
});
google.maps.event.addListener(map, 'click', function (event) {
addPoint(event.latLng);
});
// searchbox===================
const input = document.getElementById("pac-input");
const searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
let markers1 = [];
// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
const places = searchBox.getPlaces();
if (places.length == 0) {
return;
}
// Clear out the old markers.
markers1.forEach((marker) => {
marker.setMap(null);
});
markers1 = [];
// For each place, get the icon, name and location.
const bounds = new google.maps.LatLngBounds();
places.forEach((place) => {
if (!place.geometry || !place.geometry.location) {
console.log("Returned place contains no geometry");
return;
}
const icon = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25),
};
// Create a marker for each place.
markers1.push(new google.maps.Marker({
map,
icon,
title: place.name,
position: place.geometry.location,
}));
if (place.geometry.viewport) {
bounds.union(place.geometry.viewport);
}else {
bounds.extend(place.geometry.location);
}
});
map.fitBounds(bounds);
});
// 고정 마커 추가
var markers = [
// 가나
{
coords:{lat:6.6666004, lng:-1.6162709},
iconImage:'assets/img/places/stparkdublin.png',
content:'<div style="height:auto;width:400px;"><h1>가나-쿠마시</h1>쿠마시는 가나 아샨티 주의 주도이며 구 아샨티 왕국의 수도였다. 수도인 아크라에서 북서쪽으로 약 250km 떨어져 있다. 쿠마시는 적도로부터 북쪽으로 약 482km, 기니만으로터 북쪽으로 약 160km 에 위치한다.',
},
{
coords:{lat:5.6037168,lng:-0.1869644},
iconImage:'assets/img/places/botanic garden.png',
content:'<div style="height:auto;width:400px;"><h1>가나-아크라</h1>아크라는 가나 공화국의 수도이자 약 227만 명의 인구를 가진 가나 최대의 도시이다. 도시 자체도 아크라 메트로폴리스 특구에 속해 있으며, 그 면적은 약 139km²이다. 아크라의 관광지 중에 가나 국립 박물관이 있다. 코토카 국제공항이 있다.',
},
{
coords:{lat:5.1315, lng:-1.2794744},
iconImage:'assets/img/places/stparkdublin.png',
content:'<div style="height:auto;width:400px;"><h1>가나-케이프코스트</h1>케이프코스트는 가나의 항구 도시로, 중앙 주의 주도이다. 16세기부터 영국과 포르투갈, 스웨덴, 덴마크, 네덜란드의 통치를 받았다. 15세기 포르투갈이 이 곳을 발견했으며 1653년 스웨덴이 케이프코스트 성을 건설했다. 이 성은 현재 세계유산으로 지정되어 있다.',
},
{
coords:{lat:9.393908, lng:-0.8556313999999999},
iconImage:'assets/img/places/swordscastle.png',
content:'<div style="height:auto;width:400px;"><h1>가나-타말레</h1>타말레은 가나 북부 주의 주도이다. 인구는 55만명이다.',
},
{
coords:{lat:10.7875419, lng:-0.8579818},
iconImage:'assets/img/places/Howth.png',
content:'<div style="height:auto;width:400px;"><h1>가나-볼가탕가</h1>볼가탕가는 가나의 도시이다. 경작과 가축 사육이 주된 생업이다.',
},
];
var gmarkers = [];
for(var i = 0; i < markers.length; i++){
gmarkers.push(addMarker(markers[i]));
}
const sidebar = document.getElementById("sidebar"); // sidebar
var activeInfoWindow = null;
//Add MArker function
function addMarker(props){
var marker = new google.maps.Marker({
position:props.coords,
map:map,
descrip:props.content,
});
//Check content
if(props.content){
var infoWindow = new google.maps.InfoWindow({
content:props.content
});
marker.addListener('click',function(){
infoWindow.open(map,marker);
for(var i=0;i<markers.length;i++){
sidebar.innerHTML = props.content;
}
});
marker.addListener('click', function () {
if (activeInfoWindow) { activeInfoWindow.close();}
infoWindow.open(map, marker);
activeInfoWindow = infoWindow;
});
}
return marker;
}
var markerCluster = new MarkerClusterer(map, gmarkers,
{
imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
gridSize:100,
minClusterSize:10,
});
}
google.maps.event.addDomListener(window, 'load', initMap);
//poly line ======================================================================
var latlnglatlng = new Array;
function removePoint(marker) {
for (var i = 0; i < markers.length; i++) {
if (markers[i] === marker) {
markers[i].setMap(null);
markers.splice(i, 1);
polyline.getPath().removeAt(i);
}
}
}
function addPoint(latlng) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
markers.push(marker);
//console.log(markers.position.lng.Scopes);
polyline.getPath().setAt(markers.length - 1, latlng);
google.maps.event.addListener(marker, 'click', function (event) {
removePoint(marker);
});
}
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjtW34Ax16khc7UYth6--V4pNFX1XlHUE&libraries=places"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
Thanks again for watching I really want to solve this, I've been thinking about it for a month

handle click event in gmappanel extJS

click event to map Implemented but nothing hapens.I am using MVC Extjs I know how to implement in javascript for example http://jsfiddle.net/fatihacet/ckegk/ simple click event but in extjs where I should put the code I have gmappanel in window how to handle this in controller.On click on map marker should appear in that place.I have read documentation an found google.maps.event.addListener but how to implement this
Ext.define('App.view.App', {
extend: 'Ext.window.Window',
alias: 'widget.appform',
title:'',
operation:'',
resizable: false,
modal:true,
initComponent: function () {
me = this;
this.autoShow = true;
this.width = 550;
this.height = 650;
this.items = [
{
xtype: 'textfield',
name: 'title',
value:me.login,
fieldLabel: 'Title',
allowBlank: false,
width:330,
style:{
marginTop:'10px',
marginLeft:'20px',
marginRight:'20px'
}
},
{
title: 'Google Map',
width:535,
height:800,
// frame:true,
id:'gmapForm',
// height: '100%',
xtype: 'gmappanel',
gmapType: 'map',
center: {
geoCodeAddr: "221B Baker Street",
marker: {
title: 'Holmes Home'
}
},
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
mapOptions : {
mapTypeId: google.maps.MapTypeId.ROADMAP
},
listeners: {
maprender: function(extMapComponent, googleMapComp){
var marker = new google.maps.Marker({
position: position = new google.maps.LatLng (42.16726190,-87.83146810),
// position: patientPosition, //patientPosition initialized in geocodePatientAddress() function in Home.js
map: googleMapComp,
animation: google.maps.Animation.DROP,
draggable: false,
title: 'Patient Location'
});
google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(googleMapComp, marker);
console.log('sssssssssss');
});
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close(googleMapComp, marker);
});
}
},
handler : function () {
google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(googleMapComp, marker);
console.log('sssssssssss');
});
// this.up('window').down('form').getForm().reset();
}
/* google.maps.event.addListener(gObject, "click", function(e){
alert('test');
})*/
}
];
this.buttons = [
{
text:me.operation,
name: me.operation,
scope: this
},
];
console.log(arguments);
this.callParent(arguments);
}
});
Also I have controller where
Ext.define('App.controller.AppController', {
extend: 'Ext.app.Controller',
views: [
'App.AppPanelView',
'App.AppForm'
],
stores: ['App.Apptore'],
models: ['App.AppModel'],
refs: [
{ ref: 'App', selector: 'AppForm' }
],
init: function () {
this.control({
'App button[name="Add"]':{
click:this.addPersonForm,
afterrender:this.addMapListener
}
});
},
selectedRow:null,
countryId:null,
personProfile:null,
modalImageIndex:null,
imageId:null,
avatar:"",
addMarker:function(){
console.log("aaaaaaa");
var win= Ext.widget('AppForm',{title:'Add Group',operation:'Add'});
var trafficMap = Ext.getCmp('gmapForm');
// var marker_icon = new google.maps.MarkerImage('images/map/' + thisIcon + '.png', new google.maps.Size(32, 32));
/*var trafficMarker = new google.maps.Marker({
position: new google.maps.LatLng(alert.lat, alert.lon),
map: trafficMap,
// icon: marker_icon,
id: 'trafficAlertIcon' *//*i*//*
});*/
/*var options = {
lat:3.951941,
lng:-102.052002,
marker: {title:"Hello World!"},
listeners: {
click: function(e){
}
}
};
console.log(trafficMap);
var lat = 3.951941,
lng = 102.052002;
var mpoint = new google.maps.LatLng(lat,lng);
trafficMap.addMarker(mpoint,options.marker,false,false, options.listeners);*/
/* google.maps.event.addListener(trafficMarker, 'mousedown', function()
{
console.log('touched marker');
*//* trafficTabPanel.layout.setActiveItem(1, {type: 'slide', direction: 'left'});
LoadIncidentMap(this.id.substring(16));*//*
});
*/
/* google.maps.event.addListener(trafficMap, "click", function (e) {
console.log('click');
//lat and lng is available in e object
// var latLng = e.latLng;
});*/
var addMarker = google.maps.event.addListener(trafficMap, 'click', function(e) {
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
console.log(lat+ " "+ lng);
// markers[markerId] = marker; // cache marker in markers object
// bindMarkerEvents(marker); // bind right click event to marker
});
addMarker;
console.log('clickaa');
//win.show();
},
addMapListener:function() {
console.log("A1");
var trafficMap = Ext.getCmp('gmapForm');
google.maps.event.addListener(trafficMap, 'click', function(e) {
console.log("A3");
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
console.log(lat+" "+lng);
// markers[markerId] = marker; // cache marker in markers object
// bindMarkerEvents(marker); // bind right click event to marker
});
console.log("A22");
var map;
// map = new google.maps.Map($('#map')[0], myOptions);
/* var myOptions = {
zoom: 7,
center: new google.maps.LatLng(46.87916, -3.32910),
mapTypeId: 'roadmap'
};
google.maps.event.addListener(map, 'click', function(e) {
console.log(A2);
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
markers[markerId] = marker; // cache marker in markers object
bindMarkerEvents(marker); // bind right click event to marker
});*/
}
});
DOES SOMENONE KNOW HOW TO MAKE THAT BECAUSE I DONT FIND ANYTHING AND TRYING EVERYTHING AND CATCH ERRORS BUT
I only need to add marker where user clicked by mouse on map

You have this creating the map and adding an event listener:
var trafficMap = Ext.getCmp('gmapForm');
google.maps.event.addListener(trafficMap, 'click', function(e) {
var lat = e.latLng.lat(); // lat of clicked point
var lng = e.latLng.lng(); // lng of clicked point
var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: map,
id: 'marker_' + markerId
});
});
So you're creating a map and assigning it to a variable called trafficMap. But then your event listener refers to a map variable called simply map, when you add a new marker: map: map
Change that to refer to the trafficMap variable, i.e.
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: trafficMap,
id: 'marker_' + markerId
});
Or even just:
var marker = new google.maps.Marker({
position: getLatLng(lat, lng),
map: this,
id: 'marker_' + markerId
});

Meteor: Uncaught ReferenceError: calcRoute is not defined

I am new to Meteor and Javascript. I am creating a map that gives directions from your current location to a marker on the map. Everything seems to work except that I can't seem to call the calcRoute() function correctly. Or maybe it is defined in the wrong place.
I think I need some schooling on template helpers. Please tell me where I went wrong. Thanks.
var gmaps = {
// map object
map: null,
//direction services object
directionsService: null,
//direction services object
directionsDisplay: null,
//direction services object
stepDisplay: null,
markerArray: []
}
Template.map.helpers({
mapOptions: function() {
if (GoogleMaps.loaded()) {
if (!Geolocation.error()) {
pos = Geolocation.latLng();
}
return {
//center: new google.maps.LatLng(-25.2743, 133.7751),
center: new google.maps.LatLng(pos.lat, pos.lng),
zoom: 12,
scaleControl: false,
zoomControl: false,
mapTypeControl: false,
panControl: false,
rotateControl: true,
overviewMapControl: false,
streetViewControl: false,
};
}
},
calcRoute: function() {
//clear markers before calculating function
gmaps.clearMarkers();
console.log(this.markerArray);
// Retrieve the start and end locations and create
// a DirectionsRequest using BICYCLING directions.
var start = marker3.getPosition();
var end = document.getElementById('marketName').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.BICYCLING
};
// Route the directions and pass the response to a
// function to create markers for each step.
this.directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var warnings = document.getElementById('warnings_panel');
warnings.innerHTML = '<b>' + response.routes[0].warnings + '</b>';
this.directionsDisplay.setDirections(response);
gmaps.showSteps(response);
}
});
},
showSteps: function(directionResult) {
// For each step, place a marker, and add the text to the marker's
// info window. Also attach the marker to an array so we
// can keep track of it and remove it when calculating new
// routes.
var myRoute = directionResult.routes[0].legs[0];
for (var i = 0; i < myRoute.steps.length; i++) {
var marker = new google.maps.Marker({
position: myRoute.steps[i].start_location,
map: map.instance
});
gmaps.attachInstructionText(marker, myRoute.steps[i].instructions);
this.markerArray[i] = marker;
}
},
attachInstructionText: function(marker, text) {
// Instantiate an info window to hold step text.
var stepDisplay = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'mouseover', function() {
// Open an info window when the marker is clicked on,
// containing the text of the step.
stepDisplay.setContent(text);
stepDisplay.open(map.instance, marker);
})
google.maps.event.addListener(marker, 'click', function() {
map.instance.setZoom(14);
map.instance.setCenter(marker.getPosition());
stepDisplay.open(map.instance, marker);
})
},
clearMarkers: function() {
// First, remove any existing markers from the map.
for (var i = 0; i < this.markerArray.length; i++) {
this.markerArray[i].setMap(null);
}
// Now, clear the array itself.
this.markerArray = [];
}
});
Template.map.onCreated(function() {
GoogleMaps.ready('map', function(map) {
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map.instance);
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(29.71739, -95.40183),
map: map.instance,
title: 'Rice U Farmers Market'
});
var infowindow1 = new google.maps.InfoWindow({
content: ''
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.setContent( '<p>Farmers Market at Rice U </p>' +'<button onclick="Meteor.call(calcRoute());">Directions from my Location</button>');
infowindow1.open(map.instance, marker1);
});
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(29.81063, -95.37999),
map: map.instance,
title: 'Canino\'s Produce'
});
var infowindow2 = new google.maps.InfoWindow({
content: 'Canino\'s Produce'
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map.instance, marker2);
});
var image = '/img/app/flag1.png'
var marker3 = new google.maps.Marker({
position: new google.maps.LatLng(pos.lat, pos.lng),
map: map.instance,
title: 'You are here',
icon: image
});
var rendererOptions = {
map: map.instance
}
this.directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
// global flag saying we intialized already
Session.set('map', true);
})
});

You have to pass the name of the method that Meteor will call as a string;
Replace:
'<p>Farmers Market at Rice U </p>' +'<button onclick="Meteor.call(calcRoute());">Directions from my Location</button>');
infowindow1.open(map.instance, marker1);
with:
'<p>Farmers Market at Rice U </p>' +'<button onclick="Meteor.call(\'calcRoute\');">Directions from my Location</button>');
infowindow1.open(map.instance, marker1);

Googlemaps API loads slow with many markers

Im trying to load around 600 googlemap markers on page load using the function addMarker.
The page takes a lot of time to load.
Is there anything I can do to make it load faster while keep using the addMarker function?
Thanks.
var map
var myLatlng = new google.maps.LatLng(35.9531719,14.3712201);
var markerBounds = new google.maps.LatLngBounds();
var markers = {};
function HomeControl(controlDiv, map)
{
google.maps.event.addDomListener(zoomout, "click", function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 0)
{
map.setZoom(currentZoomLevel - 1);
}
});
google.maps.event.addDomListener(zoomin, "click", function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 21)
{
map.setZoom(currentZoomLevel + 1);
}
});
}
function initialize()
{
var googleMapOptions = {
center: new google.maps.LatLng(35.9531719,14.3712201),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
streetViewControl: false,
panControl: false,
draggable: true
};
map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions);
google.maps.event.addListener(map, "idle", function() {
addMarker(latitude,longitude,id,'Title','url');
});
var homeControlDiv = document.createElement("div");
var homeControl = new HomeControl(homeControlDiv, map);
}
var infowindow = new google.maps.InfoWindow({
content: ""
});
function addMarker(lat,long,id,desc,url)
{
var myIcon = new google.maps.MarkerImage("/images/pips/"+id+".png", null, null, null, new google.maps.Size(28,38));
var myLatlng = new google.maps.LatLng(lat,long);
var marker = new google.maps.Marker({
map: map,
title: desc,
position: myLatlng,
icon: myIcon,
id: id
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('' + desc + '');
infowindow.setPosition(marker.getPosition());
infowindow.open(map, marker);
});
markers[id] = marker;
markerBounds.extend(myLatlng);
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, "load", initialize);
</script>

You can use clustering, it joins neighbor markers into one, and expand only on zoom
You can do clustering in client side, as well as server side, depending the amount of markers...
I would suggest to use server clustering if amount is more than 4000, otherwise client should look fine

infoBubble nothing display on gmappanel - EXTJS 4

function addDoctorLocation(options)
{
var gm = Ext.getCmp('mygooglemap');
var mpoint = new google.maps.LatLng(options.lat,options.lng);
var marker = gm.addMarker(mpoint,options.marker,false,false, options.listeners);
infoBubble = new InfoBubble({
map: gm,
content: '<div class="phoneytext">Some label</div>',
//position: new google.maps.LatLng(options.lat, options.lng),
shadowStyle: 1,
padding: '10px',
//backgroundColor: 'rgb(57,57,57)',
borderRadius: 5,
minWidth: 200,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: false,
arrowPosition: 7,
backgroundClassName: 'phoney',
pixelOffset: new google.maps.Size(130, 120),
arrowStyle: 2
});
infoBubble.open(map, marker);
}
Success added the marker on map, unfortunately infoBubble nothing has shown? why?
and dont have any error on FireBug
UPDATE HOW TO CALL THE FUNCTION
tree.on('checkchange', function(node){
var data = node.data;
if (data.checked == true){
var lati,longi;
var record = MarkerStore.findRecord('MainID', data.MainID)
if (record){
lati = record.get('Latitude');
longi = record.get('Longitude');
}else{
Ext.MessageBox.show({
title: 'Error !',
msg: 'No Record Found In Database ! <br />',
icon: Ext.MessageBox.INFO
});
}
var options = {
lat:lati,
lng:longi,
marker: {title:"Hello World!"},
listeners: {
click: function(e){
}
},
MainID: data.MainID
}
addDoctorLocation(options);
} else {
markers[data.MainID].setMap(null);
}
})
UPPDATE For #Ankit
var markers = {};
var openedInfoWindow = null;
function addDoctorLocation(options)
{
var gm = Ext.getCmp('mygooglemap');
var mpoint = new google.maps.LatLng(options.lat,options.lng);
var marker = gm.addMarker(mpoint,options.marker,false,false, options.listeners);
markers[options.MainID] = marker;
var infowindow = new google.maps.InfoWindow({
content: 'Hello !',
maxWidth: 200
});
google.maps.event.addListener(marker, 'click', function() {
// added next 4 lines
google.maps.event.addListener(infowindow, 'closeclick', function() {
openedInfoWindow = null;
});
if (openedInfoWindow != null) openedInfoWindow.close(); // <-- changed this
openedInfoWindow = infowindow;
infowindow.open(gm, marker);
});
still can't close the infowindow,when clicked marker get this error
TypeError: b.O is not a function
[Break On This Error]
(82 out of range 43)

function addDoctorLocation(options)
{
var gm = Ext.getCmp('mygooglemap');
var mpoint = new google.maps.LatLng(options.lat,options.lng);
var marker = gm.addMarker(mpoint,options.marker,false,false, options.listeners);
var infowindow = new google.maps.InfoWindow({content: "Some label"});
google.maps.event.addListener(marker, 'click', function(gm,marker) {
infowindow.open(gm, marker); // if still you can not open than use infowindow.open(gm, this)
})
}
but looks like you want to style your infowindow than better use infobox instead of infowindow. Check you about InfoBox ->Styling InfoWindow with Google Maps API
You can add some html tags like br, bold to infowindow content but I think you can not style infowindow.

I try your example with google maps intstance and it works fine:
var markers = {};
var infowindow;
var openedInfoWindow = null;
var centerPointDefault = new google.maps.LatLng(39.739, -98.984);
function DrawMainMap(centerMap) {
var myOptions = {
center: centerMap,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
$(document).ready(function () {
var options = {
lat: centerPointDefault.lat(),
lng: centerPointDefault.lng(),
marker: { title: "Hello World!" },
listeners: {
click: function(e) {
}
}
};
DrawMainMap(centerPointDefault);
addDoctorLocation(options);
}
function addDoctorLocation(options) {
var mpoint = new google.maps.LatLng(options.lat, options.lng);
var marker = new google.maps.Marker({
position: mpoint
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: 'Hello !',
maxWidth: 200
});
google.maps.event.addListener(marker, 'click', function() {
// added next 4 lines
google.maps.event.addListener(infowindow, 'closeclick', function() {
openedInfoWindow = null;
});
if (openedInfoWindow != null) openedInfoWindow.close(); // <-- changed this
openedInfoWindow = infowindow;
infowindow.open(map, marker);
});
}