Develop Reference

How to Resize API Google Map in modal to avoid gray screen

first sorry for my english
i have a little problems with the resize API Google Map in a modal, i already checked several post where we have to put the "google.maps.event.trigger({map}, 'resize');" to avoid the gray screen
but for me it does'nt work i have always the gray screen , So it s for that i ask your help
I wanted to put my code on jsfiddle but I had small mistakes so i put here
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin= "anonymous" > <!-- Optional theme -->
<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity= "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin= "anonymous" > <!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity= "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin= "anonymous" ></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkWExAooGaEJGyNuOhaUb6Z-OGDxvgnxM&libraries=places&callback=initMap"
async defer>
</script>
<style>
.pac-container {
z-index: 1051 !important;
}
#map {
width:auto;
height:480px;
overflow:visible;
display: block;
}
.modal-dialog {
position: relative;
width: auto;
margin: 60px auto;
max-width: 1000px;
/*z-index: 1500;*/
}
</style>
<!-- Modal j'achete je loue-->
<div class="modal fade" id="myModalMap" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">J'achete, je loue</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="well">
<div id="divTopRigth" class="text-right"></div>
<h1 id="TitleHistorique" class="text-center">Trouver un point de vente</h1>
<div id="locationField">
<input id="autocomplete" class="form-control" placeholder="Entrer une rue" type="text" />
</div>
<br>
<div id="map"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="openmap">open map</button>
<script>
$("#openmap").on('click',function(){
ShowModalMap();
});
function ShowModalMap(){
$('#myModalMap').appendTo("body").modal("show");
//initMap();
}
</script>
<script>
//google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition());
</script>
<script>
var placeSearch, autocomplete;
var src = 'http://149.202.171.217/cerp/V11/wp-content/themes/nouveau/FunctionAdd/test.kml';
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.8503, lng: 4.3517},
zoom:7
});
google.maps.event.trigger(map, 'resize');
var input = /** #type {!HTMLInputElement} */(document.getElementById('autocomplete'));
loadKmlLayer(src, map);
var options = {
componentRestrictions: {country: "be"}
};
var autocomplete = new google.maps.places.Autocomplete(input,options);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
map.setZoom(14);
} else {
map.setCenter(place.geometry.location);
map.setZoom(16);
}
});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
map.zoom(13);
}, function() {
});
} else {
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
map: map
});
}
}
</script>
thanks in advance

Use this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
var placeSearch, autocomplete;
var src = 'http://149.202.171.217/cerp/V11/wp-content/themes/nouveau/FunctionAdd/test.kml';
$(document).ready(function () {
$("#openmap").on('click', function () {
ShowModalMap();
});
function ShowModalMap() {
//alert(1);
$('#myModalMap').appendTo("body");
$('#myModalMap').modal("show");
initMap();
}
$('#myModalMap').on('shown.bs.modal', function () {
google.maps.event.trigger(map, "resize");
});
});
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 50.8503, lng: 4.3517 },
zoom: 7
});
loadKmlLayer(src, map);
//var resize = new google.maps.event.trigger(map, 'resize');
var input = (document.getElementById('autocomplete'));
var options = {
componentRestrictions: { country: "be" }
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
map.setZoom(14);
} else {
map.setCenter(place.geometry.location);
map.setZoom(16);
}
});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var infoWindow = new google.maps.InfoWindow({
content: '',
maxWidth: 400
});
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
map.setZoom(13);
}, function () {
});
} else {
}
}
function loadKmlLayer(src, map) {
var kmlLayer = new google.maps.KmlLayer(src, {
suppressInfoWindows: true,
preserveViewport: false,
map: map
});
}
//setTimeout(function () {
// loadKmlLayer(src, map);
//}, 10000);
//}
//google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition());
</script>
<style>
.pac-container {
z-index: 1051 !important;
}
#map {
width: auto;
height: 480px;
overflow: visible;
display: block;
}
.modal-dialog {
position: relative;
width: auto;
margin: 60px auto;
max-width: 1000px;
/*z-index: 1500;*/
}
</style>
</head>
<body>
<!-- Modal j'achete je loue-->
<div class="modal fade" id="myModalMap" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">J'achete, je loue</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="well">
<div id="divTopRigth" class="text-right"></div>
<h1 id="TitleHistorique" class="text-center">Trouver un point de vente</h1>
<div id="locationField">
<input id="autocomplete" class="form-control" placeholder="Entrer une rue" type="text" />
</div>
<br>
<div id="map"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="openmap">open map</button>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkWExAooGaEJGyNuOhaUb6Z-OGDxvgnxM&libraries=places&callback=initMap" async defer></script>
</body>
</html>

bing maps in windows phone 8.1

am developing an app which uses map, and am using html, javascript for developing, i found that there is an extension for windows store app for using bing map, but its not supported in windows phone 8.1 javascript app development. so i hacked into the entension for RT and added to my project, and only error i get is Windows.ApplicationModel.Resource.core.ResourceManager has been deprecated. and i know that other scripts are loading before the map does. and still i couldnt find he solution. here is my code.
default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>homePage</title>
<!-- WinJS references -->
<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<link href="/css/default.css" rel="stylesheet" />
<link href="/pages/home/home.css" rel="stylesheet" />
<script src="/pages/home/home.js"></script>
<!-- bing map api-->
<script type="text/javascript" src="/js/bing/veapicore.js"></script>
<script type="text/javascript" src="/js/bing/veapiModules.js"></script>
<link href="/css/mapcontrol.css" rel="stylesheet" />
<!--<script type="text/javascript"
src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0">
</script>-->
<!-- bing map controls-->
<script src="/js/MapControls.js"></script>
</head>
<body>
<!-- The content that will be loaded and displayed. -->
<div class="fragment homepage">
<header aria-label="Header content" role="banner">
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Native</span>
</h1>
</header>
<section aria-label="Main content" role="main" style="overflow:auto;">
<div style="float:left; margin: 10px 10px 10px 10px;">
<input type="button" value="Get My Location" onclick="GetMyLocation();" />
<input type="text" id="txtStart" placeholder="Source" maxlength="50" />
<input type="text" id="txtEnd" placeholder="Destination" maxlength="50" />
<input type="button" value="Create Route" onclick="GetRoute();" />
</div>
<div id="mapcontainer" style="height:150px;width:150px;"></div>
<div id='itineraryDiv' style="position:relative; width:40%; height:90%; float: right; overflow:auto; font-family:Verdana, Arial"></div>
</section>
</div>
mapcontrol.js
(function () {
function initialize() {
Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: GetMap });
}
document.addEventListener("DOMContentLoaded", initialize, false);
})();
var map, searchManager, directionsManager, loc = null;
function GetMap() {
var mapOptions =
{
credentials: "bing map key",
mapTypeId: Microsoft.Maps.MapTypeId.road
};
map = new Microsoft.Maps.Map(document.getElementById("mapcontainer"), mapOptions);
}
function GetMyLocation() {
var geolocator = new Windows.Devices.Geolocation.Geolocator();
geolocator.getGeopositionAsync().then(function (loc) {
var mapCenter = map.getCenter();
mapCenter.latitude = loc.coordinate.latitude;
mapCenter.longitude = loc.coordinate.longitude;
map.setView({ center: mapCenter, zoom: 12 });
var loc = new Microsoft.Maps.Location(loc.coordinate.latitude, loc.coordinate.longitude);
var pushPin = new Microsoft.Maps.Pushpin(loc);
map.entities.push(pushPin);
});
}
function geocodeCallback(response, userData) {
if (response &&
response.results &&
response.results.length > 0) {
var r = response.results[0];
var l = new Microsoft.Maps.Location(r.location.latitude, r.location.longitude);
//Display result on map
var p = new Microsoft.Maps.Pushpin(l);
map.entities.push(p);
//Zoom to result
map.setView({ center: l, zoom: 15 });
} else {
ShowMessage("Geocode Response", "Not results found.");
}
}
function GetRoute() {
ClearMap();
if (directionsManager) {
directionsManager.setRequestOptions({ routeMode: Microsoft.Maps.Directions.RouteMode.driving });
var startWaypoint = new Microsoft.Maps.Directions.Waypoint(
{ address: document.getElementById('txtStart').value });
var endWaypoint = new Microsoft.Maps.Directions.Waypoint(
{ address: document.getElementById('txtEnd').value });
directionsManager.addWaypoint(startWaypoint);
directionsManager.addWaypoint(endWaypoint);
directionsManager.setRenderOptions({ itineraryContainer: document.getElementById('itineraryDiv') });
directionsManager.calculateDirections();
} else {
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', {
callback: function () {
directionsManager = new Microsoft.Maps.Directions.DirectionsManager(map);
GetRoute();
}
});
}
}
function ClearMap() {
map.entities.clear();
if (directionsManager) {
directionsManager.resetDirections();
}
}
function geocodeError(request) {
ShowMessage("Geocode Error", "Unable to Geocode request.");
}
function ShowMessage(title, msg) {
var m = new Windows.UI.Popups.MessageDialog(title, msg);
m.showAsync();
}
the error which i get is.
The method Windows.ApplicationModel.Resources.Core.ResourceManager.get_DefaultContext has been deprecated. DefaultContext may be altered or unavailable for releases after Windows Phone 'OSVersion' (TBD). Instead, use ResourceContext.GetForCurrentView.
it will be so helpful if someone figure it out. thanks in advance.

Use the online URL to Bing Maps V7 or v8 and not the JS files from the Windows 8 API. Note that the Windows 8 API is deprecated in Windows 10.

Google map stops working after clicking and moving mouse

I have following code that has two buttons, one to show a map and the other to hide it and show a paragraph. The problem is that first time I open the page it shows the map but as soon as I try to move it to find the selected positions it stops showing the map.
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
</head>
<body>
<div id="myDiv" class="col-md-4 hidden-xs"
style="padding-left: 7px; background-color: white;">
<div class="row"
style="margin-left: 30px; margin-top: 36px; background-color: white;">
<div id="hideMap" class="col-md-5" onClick="hideMap()">Hide</div>
<div id="showMap" class="col-md-5" onClick="populateMap()">Show</div>
</div>
<div id="myMap" style="width: 380px; height: 400px"></div>
<div id="para"><p>This is it</p></div>
</div>
<script>
function hideMap() {
$("#myMap").hide();
$("#para").show();
}
function populateMap() {
$("#para").hide();
$("#myMap").show();
}
var map;
var markers = [];
var pinColor = "FE7569";
function pinImage(imagenum) {
return image = new google.maps.MarkerImage(
"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="
+ imagenum + "|" + pinColor);
}
function initialize() {
var centreLoc = new google.maps.LatLng(37.9908372,23.7383394);
var mapOptions = {
zoom : 13,
center : centreLoc,
disableDefaultUI : true,
mapTypeControlOptions : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('myMap'),
mapOptions);
hideMap();
var results = [ [ 'Pos1', 37.9908372,23.7383394 ],
[ 'Pos2', 37.89,23.7383394 ] ];
processResults(results);
}
function processResults(results) {
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
$("#marker-container").empty();
for (i = 0; i < results.length; i++) {
var place = results[i][0];
var placeLoc = new google.maps.LatLng(results[i][2], results[i][3]);
// Create a marker for each place.
var marker = new google.maps.Marker({
map : map,
title : place,
position : placeLoc,
icon : pinImage(i + 1)
});
markers.push(marker);
var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>"
+ place + "</span>");
$("#marker-container").append(description);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
Before (Once the demo is loaded)
After (Try to find an address on the map)

You need to trigger the 'resize' event on the map after it is displayed, then set the center once it has a size:
function populateMap() {
$("#para").hide();
$("#myMap").show();
google.maps.event.trigger(map,'resize');
map.setCenter(centreLoc);
}
updated fiddle
code snippet (removed signed_in=true, doesn't play well in SO code snippets):
function hideMap() {
$("#myMap").hide();
$("#para").show();
}
function populateMap() {
$("#para").hide();
$("#myMap").show();
google.maps.event.trigger(map,'resize');
map.setCenter(centreLoc);
}
var map;
var centreLoc;
var markers = [];
var pinColor = "FE7569";
function pinImage(imagenum) {
return image = new google.maps.MarkerImage(
"http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="
+ imagenum + "|" + pinColor);
}
function initialize() {
centreLoc = new google.maps.LatLng(37.9908372,23.7383394);
var mapOptions = {
zoom : 13,
center : centreLoc,
disableDefaultUI : true,
mapTypeControlOptions : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('myMap'),
mapOptions);
hideMap();
var results = [ [ 'Pos1', 37.9908372,23.7383394 ],
[ 'Pos2', 37.89,23.7383394 ] ];
processResults(results);
}
function processResults(results) {
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
$("#marker-container").empty();
for (i = 0; i < results.length; i++) {
var place = results[i][0];
var placeLoc = new google.maps.LatLng(results[i][1], results[i][2]);
// Create a marker for each place.
var marker = new google.maps.Marker({
map : map,
title : place,
position : placeLoc,
icon : pinImage(i + 1)
});
markers.push(marker);
var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>"
+ place + "</span>");
$("#marker-container").append(description);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
<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?v=3.exp&libraries=places.js"></script>
<div id="myDiv" class="col-md-4 hidden-xs"
style="padding-left: 7px; background-color: white;">
<div class="row"
style="margin-left: 30px; margin-top: 36px; background-color: white;">
<div id="hideMap" class="col-md-5" onClick="hideMap()">Hide</div>
<div id="showMap" class="col-md-5" onClick="populateMap()">Show</div>
</div>
<div id="myMap" style="width: 380px; height: 400px"></div>
<div id="para"><p>This is it</p></div>
</div>

sorry for late response
if you mind please this one
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
</head>
<body>
<div id="myDiv" class="col-md-4 hidden-xs" style="padding-left: 7px; background-color: white;">
<div class="row" style="margin-left: 30px; margin-top: 36px; background-color: white;">
<div id="hideMap" class="col-md-5" onClick="hideMap()">Hide</div>
<div id="showMap" class="col-md-5" onClick="populateMap()">Show</div>
</div>
<div id="myMap" style="width: 380px; height: 400px;"></div>
<div id="para"><p>This is it</p></div>
</div>
<script>
function hideMap() {
$("#myMap").css('display', 'none');
$("#para").css('display', 'block');
}
function populateMap() {
$("#para").hide();
$("#myMap").show();
}
var map;
var markers = [];
var pinColor = "FE7569";
function pinImage(imagenum) {
return image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + imagenum + "|" + pinColor);
}
function initialize() {
var centreLoc = new google.maps.LatLng(37.9908372,23.7383394);
var mapOptions = {
zoom : 10,
center : centreLoc,
disableDefaultUI : true,
mapTypeControlOptions : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('myMap'), mapOptions);
var results = [ [ 'Pos1', 37.9908372,23.7383394 ], [ 'Pos2', 37.89,23.7383394 ] ];
processResults(results);
google.maps.event.addListenerOnce(map, 'idle', function(){
hideMap();
});
}
function processResults(results) {
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
$("#marker-container").empty();
for (i = 0; i < results.length; i++) {
var place = results[i][0];
var placeLoc = new google.maps.LatLng(results[i][1], results[i][2]);
// Create a marker for each place.
var marker = new google.maps.Marker({
map : map,
title : place,
position : placeLoc,
icon : pinImage(i + 1)
});
markers.push(marker);
var description = $("<div class='marker-description'><image class='marker' src='" + marker.icon.url + "'></image><span class='place'>" + place + "</span>");
$("#marker-container").append(description);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
I put wrong style
<div id="myMap"></div>
<div id="para" style="width: 380px; height: 400px;"><p>This is it</p></div>
to this one
<div id="myMap" style="width: 380px; height: 400px;"></div>
<div id="para"><p>This is it</p></div>

how to fetch draggable marker latlng information

im making a solution that does the geocoding , i can get coords from adresse , and put a marker over this adresse , im trying to make this marker draggabele and everytime i change the marker position with the mouse , i must get the new cooords , can someone help me ?
edit : Solution with event.addlistner
this is my code (js + html )
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js? v=3.exp&signed_in=true"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(34.042145, -4.997128);
var mapOptions = {
zoom: 5,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
var lg;
var lat;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
map.setZoom(16);
var lat = results[0].geometry.location.lat();
document.getElementById('latitude').value = lat;
var lg = results[0].geometry.location.lng();
document.getElementById('longitude').value = lg;
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
draggable : true
});
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel">
<input id="address" type="textbox">
<input id="latitude" type="textbox" >
<input id="longitude" type="textbox" >
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
</html>

Use Google Maps' getPosition function:
google.maps.event.addListener(marker,"dragend",function(){
document.getElementById("latitude").value=marker.getPosition().lat();
document.getElementById("longitude").value=marker.getPosition().lng();
});

How to add the svg code in google maps

I had a Blinking SVG code : http://jsfiddle.net/Muthukumaru/n4d80zLd/
I am trying to add this SVG code to the Google maps to the particular pointer so that that particular marker do blink
I am new to the Google maps API , How to add the SVG code to the Google maps Code :
This is the Code of the Google Maps :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 1000px; height: 600px;"></div>
<script type="text/javascript">
var locations = [
['STHOWBGA01_ATIF_RNID_L015',24.31026,93.56268],
['GWTRGOK004_BILF_RNOD_L023',23.70692,91.27397],
['GWTRBLWBN1_BILF_RNOD_L038',24.0179,91.4529],
['SJOWKHL007_ATIF_RNOD_L012',25.35197,92.3723],
['TTINNMSAI4_VIOF_RNID_L011',27.66616,95.87926],
['SIMWUKHRL5_VIOF_RNID_L061',25.12267,94.36558],
['SDIMZLUKI3_BILF_RNOD_L035',25.63658,93.64943]
];
var lat_center = 24.31026,
long_center = 93.56268;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(lat_center, long_center),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i, text;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
text = locations[i][0];
if(locations[i][1] === lat_center && locations[i][2] === long_center) {
marker.setAnimation(google.maps.Animation.DROP);
marker.setIcon('https://maps.gstatic.com/intl/en_ALL/mapfiles/markers2/boost-marker-mapview.png');
}
google.maps.event.addListener(marker, 'mouseover', (function(marker, text) {
return function() {
infowindow.setContent(text);
infowindow.open(map, marker);
}
})(marker, text));
}
</script>
</body>
</html>
I had passed the particular center marker with link png image :
https://maps.gstatic.com/intl/en_ALL/mapfiles/markers2/boost-marker-mapview.png
Instead of png image link , I want to pass the SVG code from JSfiddle that I provided above:
can any one please help ,
Thanks
NEW CODE
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="css/search.css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<style>
b{
color:red;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
<?php
include_once('connection.php');
$con=SQL_CONNECT();
$COMMAND="select unique(SITEID) from LATLONG";
$stid = oci_parse($con, $COMMAND);
$res=oci_execute($stid);
echo "var availableTags = [ ";
while ($row = oci_fetch_array($stid))
{
echo '"'.$row['SITEID'].'",';
}
echo "]";
oci_close($con);
?>
$('#site').autocomplete({
source: availableTags,
open: function (e, ui) {
var acData = $(this).data('autocomplete');
acData
.menu
.element
.find('a')
.each(function () {
var me = $(this);
var keywords = acData.term.split(' ').join('|');
me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '<b>$1</b>'));
});
}
});
// $( "#datepicker" ).datepicker();
$("#butn").click(function(){
var sitename=$("#site").val();
if(sitename.length==0)
{
alert("please enter text");
}
else
{
$("#fetch").load('one_marker.php',{sitename:sitename},function(res){
});
}
});
});
</script>
</head>
<body id='tableb'>
<table align="center" id='tables'>
<tr><td>ENTER TEXT: </td><td><input type="text" id="site" name="sitename" placeholder="Sitename"><div id="site_error"></div></td></tr>
<tr><td></td><td><input style="cursor:pointer" type="button" id="butn" value="submit"/></td></tr>
</table>
<div id="content" style="display:none;"></div>
<div id="fetch"></div>
</body>
</html>
The variable which i get the from the auto complete will pass through ajax call : blink_php.php
please check this page :
<?php
include_once('connection.php');
$conn=SQL_CONNECT();
$sitename=$_POST['sitename'];
$stid = oci_parse($conn, "SELECT * FROM latlong where SITEID like '%$sitename%'");
$res=oci_execute($stid);
while($data = oci_fetch_array($stid))
{ ?>
<div id="lati_center" style="display: none;">
<?php
echo htmlspecialchars($data['LAT']);
?>
</div>
<div id="longi_center" style="display: none;">
<?php
echo htmlspecialchars($data['LON']);
?>
</div>
<?php
}
oci_close($conn);
?>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<style>
#map {
margin:20px auto;
}
.reddot{
width:66px;
height:66px;
position:absolute
}
.locater{
position: absolute;
top: 18px;
left: 17px;
}
.mark{
fill: none;
stroke: #FF9100;
stroke-width: 1px;
cursor: pointer;
z-index: 1000;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<div id="map" style="width: 1000px; height: 600px;"></div>
<script type="text/javascript">
var locations = [
<?php
include_once('connection.php');
$con=SQL_CONNECT();
$COMMAND="select * from LATLONG";
$stid = oci_parse($con, $COMMAND);
$res=oci_execute($stid);
$len = "select count(*) from latlong";
$len_c = oci_parse($con, $len);
$res_c=oci_execute($len_c);
$i=0;
while ($data = oci_fetch_array($stid))
{
if($i==$len - 1)
{
echo "['<b>".$data['SITEID']."</b><br>".$data['ADDRESS']."</br>',".$data['LAT'].",".$data['LON']."]" ;
}else{
echo "['<b>".$data['SITEID']."</b><br>".$data['ADDRESS']."</br>',".$data['LAT'].",".$data['LON']."]," ;
}
$i++;
}
oci_close($con);
?>
];
var div_lat = document.getElementById("lati_center");
var lat_center = div_lat.textContent;
var div_lon = document.getElementById("longi_center");
var long_center = div_lon.textContent;
alert(div_lat+","+div_lon)
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: new google.maps.LatLng(lat_center, long_center),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i, text;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
text = locations[i][0];
if(locations[i][1] === lat_center && locations[i][2] === long_center) {
// marker.setAnimation(google.maps.Animation.DROP);
marker.setIcon('https://maps.gstatic.com/intl/en_ALL/mapfiles/markers2/boost-marker-mapview.png');
map.Overlay= new google.maps.OverlayView();
map.Overlay.center_ = new google.maps.LatLng(lat_center, long_center);
map.Overlay.reddot_ = '<div id="reddot" class="reddot" style="position:relative;"><svg class="marker" height="66" width="66"><circle cy="33" cx="33" class="mark" r="25"><set id="show" attributeName="visibility" attributeType="CSS" to="visible" begin="0s; hide.end" dur="1s" fill="freeze"/><set id="hide" attributeName="visibility" attributeType="CSS" to="hidden" begin="show.end" dur="1s" fill="freeze"/></circle><img src="" class="locater"></svg></div>';
map.Overlay.draw = function () {
var pixelposition = this.getProjection().fromLatLngToDivPixel(this.center_);
jQuery('#reddot').css({top:(pixelposition.y-50), left:(pixelposition.x-33)});
};
map.Overlay.onAdd=function() {
var self=this;
jQuery(self.getPanes().markerLayer).append(self.reddot_);
};
map.Overlay.setMap(map);
}
google.maps.event.addListener(marker, 'mouseover', (function(marker, text) {
return function() {
infowindow.setContent(text);
infowindow.open(map, marker);
}
})(marker, text));
}
</script>
</body>

You can't use an SVG element as marker Icon. What you can do is mimic the behavior of google.maps.Marker using an google.maps.OverlayView element.
For example:
map.Overlay= new google.maps.OverlayView();
map.Overlay.center_ = new google.maps.LatLng(lat_center, long_center);
map.Overlay.reddot_ = '<div id="reddot" class="reddot" style="position:relative;"><svg class="marker" height="66" width="66"><circle cy="33" cx="33" class="mark" r="25"><set id="show" attributeName="visibility" attributeType="CSS" to="visible" begin="0s; hide.end" dur="1s" fill="freeze"/><set id="hide" attributeName="visibility" attributeType="CSS" to="hidden" begin="show.end" dur="1s" fill="freeze"/></circle><img src="http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png" class="locater"></svg></div>';
map.Overlay.draw = function () {
var pixelposition = this.getProjection().fromLatLngToDivPixel(this.center_);
jQuery('#reddot').css({top:(pixelposition.y-50), left:(pixelposition.x-33)});
};
map.Overlay.onAdd=function() {
var self=this;
jQuery(self.getPanes().markerLayer).append(self.reddot_);
};
map.Overlay.setMap(map);
See the working example at: http://bl.ocks.org/amenadiel/9e08b294d3bd7ce09220
(I used jQuery to append the SVG to the markerLayer pane, but you can do that with raw js too)