hi I used google map in my page but when I run page it shows Maps for 1 second and after that shows below error
Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmsXMgphSbo9RUEQ6TS0P-hJUYyExcibI"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(35.692159, 51.258344);
var mapOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{ "featureType": "all", "elementType": "labels", "stylers": [{ "visibility": "on"}] }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": [{ "saturation": 36 }, { "color": "#000000" }, { "lightness": 40}] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#000000" }, { "lightness": 16}] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [{ "visibility": "off"}] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "color": "#000000" }, { "lightness": 20}] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#000000" }, { "lightness": 17 }, { "weight": 1.2}] }, { "featureType": "administrative.country", "elementType": "labels.text.fill", "stylers": [{ "color": "#e5c163"}] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [{ "color": "#c4c4c4"}] }, { "featureType": "administrative.neighborhood", "elementType": "labels.text.fill", "stylers": [{ "color": "#e5c163"}] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 20}] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 21 }, { "visibility": "on"}] }, { "featureType": "poi.business", "elementType": "geometry", "stylers": [{ "visibility": "on"}] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "color": "#e5c163" }, { "lightness": "0"}] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "visibility": "off"}] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [{ "color": "#ffffff"}] }, { "featureType": "road.highway", "elementType": "labels.text.stroke", "stylers": [{ "color": "#e5c163"}] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 18}] }, { "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{ "color": "#575757"}] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [{ "color": "#ffffff"}] }, { "featureType": "road.arterial", "elementType": "labels.text.stroke", "stylers": [{ "color": "#2c2c2c"}] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 16}] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [{ "color": "#999999"}] }, { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 19}] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 17}]}]
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = '<div style="direction: rtl; text-align: right;font-family: behtop_Yekan; float:right;margin:1px 12px 0 0; width:100px;">' +
'<h4>مشاور املاک عبدی</h4>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'تهرانسر'
});
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'mouseover', function () {
infowindow.open(map, marker);
});
}
</script>
what should I do
Best regards
Neda
