Click here to Skip to main content
15,891,951 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I don't know how to add classname into the .js part.

I want to add this css to my marker.

CSS
.marker {
    margin-top: 20px;
		margin-left: 30px;
		position: relative;
	}

	.pulse {
		width: 10px;
		height: 10px;
		border: 5px solid #ffb3b3;

		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		background-color: #ff4d4d;
		z-index: 10;
		position: absolute;
	}

	.dot {
    position: absolute;
    height: 50px;
		width: 50px;
		top: -25px;
		left: -25px;
		z-index: 2;
		opacity: 0;
		border: 10px solid #ffe6e6;;
		background: transparent;
		-webkit-border-radius: 60px;
		-moz-border-radius: 60px;
		border-radius: 60px;
		-webkit-animation: flash 2s ease-out;
		-moz-animation: flash 2s ease-out;
		animation: flash 2s ease-out;
    -webkit-animation-iteration-count: infinite;
		-moz-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	}

  @-moz-keyframes pulse {
	 0% {-moz-transform: scale(0);opacity: 0.0;}
	 25% {-moz-transform: scale(0);opacity: 0.1;}
	 50% {-moz-transform: scale(0.1);opacity: 0.3;}
	 75% {-moz-transform: scale(0.5);opacity: 0.5;}
	 100% {-moz-transform: scale(1);opacity: 0.0;}
  }

  @-webkit-keyframes "flash" {
	 0% {-webkit-transform: scale(0);opacity: 0.0;}
	 25% {-webkit-transform: scale(0);opacity: 0.1;}
	 50% {-webkit-transform: scale(0.1);opacity: 0.3;}
	 75% {-webkit-transform: scale(0.5);opacity: 0.5;}
	 100% {-webkit-transform: scale(1);opacity: 0.0;}
	}


What I have tried:

JavaScript
function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == 'OK') {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          //animation: google.maps.Animation.BOUNCE,

            map: map,
            icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 8.5,
          fillColor: "#ff0000",
          fillOpacity: 0.6,
          strokeWeight: 0.4,

      },
            position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
Posted
Comments
F-ES Sitecore 7-Mar-18 4:06am    
Is there a reason you can't just add the css to the parent page the normal way using the style tag or using a link tag to a css file? If you have to do this from js then the easiest way is probably to create a link tag that references the desired css in a file and add that link tag to the head of the page. If you google "javascript create link tag" or "javascript add link tag to head" I'm sure you'll find examples.
zPositive 7-Mar-18 8:47am    
can you explain more I really don't get what you are saying the "javascript create link tag" or "javascript add link tag to head" Thank you in advanced. @F-ES Sitecore
F-ES Sitecore 7-Mar-18 9:10am    
You reference a css file using a <link> tag, so if your desired css styles are not on the page then you can add a link tag to the page (in the "head" section) programatically via js and that will cause the browser to load your css and apply it to the page.
ZurdoDev 7-Mar-18 10:00am    
What exactly do you want to do?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900