Google Mapを表示して指定の位置にマーカーや吹き出しを付ける方法をご紹介します。
サンプルコードでは地図の表示の仕方は省いています。
地図の表示についてはこちらを参考にしてください。

マーカ－の表示

マーカーの表示方法とプロパティ 上記、地図のサンプルコード

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(35.68978889880994, 139.70049233458258),
    title: "新宿駅",
    map: map
});

マーカーのプロパティ

プロパティ	説明
clickable	trueの場合、マーカーはマウス イベントとタッチ イベントを受け取ります。デフォルト値:true
cursor	マウスオーバー時に表示されるマウスのカーソル。
draggable	trueの場合、マーカーをドラッグすることができます。デフォルト値:false
flat	trueの場合、マーカーの影は表示されません。
icon	前面のアイコン。
map	マーカーを表示する地図。
position	マーカーの位置（緯度・経度）。必須です。
shadow	影の画像
shape	ドラッグ/クリック用の画像マップの領域定義。
title	ロールオーバーテキスト
visible	true の場合、マーカーが表示されます。
zIndex	情報ウィンドウの重なり順序を指定します。 数字が大きい方が前面に表示されます。

ポップアップ（吹き出し）

ポップアップの表示方法
上記、地図のサンプルコード

var infowindow= new google.maps.InfoWindow({
    position: new google.maps.LatLng(35.68978889880994, 139.70049233458258),
    content: "新宿駅"
});
infowindow.open(map);

ポップアップを閉じる場合は下記

infowindow.close();

ポップアップのプロパティ

プロパティ	説明
content	情報ウィンドウ内に表示するテキストを指定します。HTML文も記述できます。
disableAutoPan	情報ウィンドウを表示する時に、地図を情報ウィンドウ全体が表示されるよう地図が自動的に移動するのを無効化するかを真偽値で指定します。 デフォルトはfalse（自動移動）。
pixelOffset	情報ウィンドウの先端部分と情報ウィンドウを固定するオフセット値を指定します。
position	情報をウィンドウの位置（緯度・経度）
maxWidth	maxWidthには、情報ウィンドウの最大幅を指定します（単位：ピクセル）。 maxWidthを指定した場合、その幅よりあふれる場合は、情報ウィンドウ内に縦スクロールが表示あれます。 maxWidthを指定しない場合は、吹き出し内のコンテンツ量に合わせて自動的に伸縮されます。
zIndex	情報ウィンドウの重なり順序を指定します。 数字が大きい方が前面に表示されます。

マーカーにポップアップを付ける

上記、地図のサンプルコード

// マーカーの作成
var marker = new google.maps.Marker({
	position: new google.maps.LatLng(35.68978889880994, 139.70049233458258),
	title: "新宿駅",
	map: map
});

// ポップアップの作成
var infowindow= new google.maps.InfoWindow({
		content: "新宿駅"
});

// ポップアップを地図とマーカーを指定して開く
infowindow.open(map, marker);

// ポップアップがクローズされた場合、マーカーを押されたらポップアップが開くイベントを付与
google.maps.event.addListener(infowindow, "closeclick", function() {
	google.maps.event.addListenerOnce(marker, "click", function(event) {
		infowindow.open(map, marker);
	});
});

«前の記事：ライセンスの種類と要点file_get_contentsが使えない時の対処方法：次の記事»